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随 着 Web 网 站 用 户 页 面体 验 要 求 的 增高 ， 页 面前 端 技 术 日 趋 重 要 ，HTML 和 CSS 技术 的 
成 熟 ， 使 其 在 前 端 技术 中 突显 优势 ， 在 目前 移动 计算 平台 分 化 发 展 的 形势 下 ，HTML 和 CSS 
技术 作为 各 平台 统一 开发 语言 ， 以 其 标准 布局 和 精美 样式 ， 成 为 Web 开发 众多 技术 中 不 可 蔡 
代 的 弄潮儿 ， 受 到 广大 技术 人 员 的 重视 。 本 书 针对 HTML 和 CSS 页 面 开发 技术 ， 全 面 讲解 
HTML+CSS 构建 网 页 的 知识 和 技巧 ， 使 读者 快速 掌握 网 页 布局 和 样式 的 美化 方法 。 

本 书 内 容 包 括 HTML 和 CSS 的 基本 语法 和 用 法 ， 设 置 文字 、 段 落 、 图 片 、 背 景 、 表 格 、 
表单 和 菜单 等 网 页 元 素 的 方法 , 重点 介绍 如 何 使 用 HTML+CSS 进行 页 面 布局 , 注重 实战 操作 ， 
使 读者 在 学 习 页 面 编程 技术 的 同时 ， 掌 握 HTML 和 CSS 的 精 藤 。 除 此 以 外 ， 还 介绍 了 一 些 扩 
展 知识 ， 包 括 CSS 和 JavaScript、XML、Ajax 等 综合 应 用 ， 使 读者 能 够 快速 入 门 。 最 后 给 出 
两 个 综合 实例 ， 使 读者 进一步 巩固 所 学 的 知识 ， 提 高 综合 实战 能 力 。 


本 书 特色 


设计 技术 。 

图 文 并 茂 : 注重 操作 ， 图 文 并 茂 ， 在 介绍 案例 的 过 程 中 ， 每 一 个 操作 均 有 对 应 的 插图 。 这 
种 图 文 结合 的 方式 使 读者 在 学 习 过 程 中 能 够 直观 、 清晰 地 看 到 操作 的 过 程 以 及 效果 , 便于 更 快 
地 理解 和 掌握 。 

案例 丰富 : 把 知识 点 融 汇 于 案例 实 训 当 中 ，, 并且 结 合 经 典 案例 进行 讲解 和 拓展 , 使 读者 达 
到 “ 知 其 然 ， 并 知 其 所 以 然 ” 的 效果 。 

提示 技巧 : 对 读者 在 学 习 过 程 中 可 能 会 遇 到 的 疑难 问题 以 “提示 ”和 “技巧 ”的 形式 进行 
了 说 明 ， 以 免 读 者 在 学 习 的 过 程 中 走 弯路 。 

技术 实用 : 所 有 案例 都 是 模仿 现实 网 站 开发 而 设计 的 , 在 实际 工作 中 的 参考 性 比较 强 。 

读者 对 象 

本 书 是 一 本 完整 介绍 HTML+CSS 网 页 设计 的 教程 ， 内 容 丰 富 ， 条 理 清 晰 ， 实 用 性 强 。 


@ 对 于 HTML+CSS 网 页 设计 初学 者 ， 可 以 快速 上 手 设计 精美 的 网 页 。 
@ 对 于 HIML+CSS 设计 人 员 ， 可 以 快速 掌握 网 页 设计 技巧 。 
@ 对 于 Web 开发 人 员 ， 可 以 作为 网 页 设计 参考 。 


代码 下 载 与 技术 支持 
本 书 代码 可 以 从 下 面 网 址 下 载 : 


精通 HTMJ+CS55 网 页 布局 与 样式 〈 视 频 教学 版 ) 


http://pan.baidu.com/s/121CCt 

本 书 教学 视频 可 以 下 面 网 址 下 载 : 

http://pan.baidu.com/s/lcdceO 

如 果 代 码 下 载 有 问题 ， 请 发 邮件 给 booksaga@163.com， 邮 件 主 题 为 “ 求 代 码 ， 精 通 
HIML+CSS”。 另 外 ， 读 者 在 阅读 本 书 过 程 中 如 有 疑问 可 以 联系 QQ: 443692455。 
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第 1 章 


< 网 页 设计 基础 知识 > 


在 网 络 高 速 发 展 的 今天 , 网 站 已 经 成 为 一 个 展示 自我 、 宣 传 自我 的 工具 。 


公司 或 个 人 可 以 


拥有 自己 的 网 站 ， 向 别人 介绍 自己 ， 展 示 自 己 的 风采 。 这 些 都 离 不 开 HTML 网 页 ， 网 页 是 这 


些 信息 的 载体 。 


1 


-1 认识 网 页 


当 打开 一 个 网 站 后 ， 首 先 呈现 在 读者 面前 的 就 是 网 页 ， 网 页 上 的 图 片 、 文 字 、 音 频 和 视频 
等 构成 网 站 的 基本 元 素 ， 网 页 是 承载 各 种 网 站 应 用 的 平台 。 


1.1.1 网 页 和 网 站 


网 页 (Web Page) 是 一 个 文件 ， 它 存放 在 世界 上 某 个 角落 的 某 一 部 计算 村 


中 ， 而 这 部 计 


算 机 必须 是 与 互联 网 相连 的 。 网 页 是 由 网 址 (URL， 如 www.sohu.com) 来 识别 与 存 取 的 ， 在 


浏览 器 中 输入 网 址 后 , 经 过 一 段 复杂 芯 


旺 序 ， 网 页 文件 会 被 传送 到 


读者 的 计算 机 中 ,然后 


过 浏览 器 解释 网 页 内 容 ， 将 其 展示 到 读者 的 眼前 ， 网 页 通常 是 HIML 格式 的 (文件 扩 


为 .html 或 .htm) 。 
网 站 (Website) 是 指 在 因特网 上 ， 


就 像 布告 栏 一 样 ,人们 可 以 通过 网 站 来 


关 的 网 络 服务 。 衡 量 一 个 网 站 的 性 能 时 


“网 速 ”) 、 网 站 软件 配置 、 网 站 提供 
真实 流量 。 
在 一 个 网 站 中 ， 网 页 按照 类 型 ， 


发 布 自己 想 要 公开 的 资讯 信 


根据 一 定 的 规则 ， 使 用 HTML 等 工具 制作 的 用 于 
特定 内 容 的 相关 网 页 的 集合 ， 常 见 的 网 站 有 搜狐 、 新 浪 等 。 简 单 地 说 ， 网 站 是 


的 服务 等 几 方面 考虑 ， 最 直 


它 是 进入 一 个 网 站 的 开始 画面 ， 如 图 1 


-1 所 示 。 


本 通 
展 名 


菇 不 


-种 通信 工具 ， 


息 , 或 者 利用 网 站 来 提供 相 


通常 从 网 站 空间 大 小 、 网 站 位 置 、 网 站 连接 速度 (俗称 


痰 的 衡量 标准 是 这 个 网 站 的 


以 分 为 两 种 ， 即 主页 和 普通 网 页 。 主 页 (Home Page) 


精 志 HTML+CSS 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


图 1-1 搜狐 的 主页 


1.1.2 网 页 基本 构成 元 素 

在 Internet 早期 ， 网 站 只 能 保存 单纯 文本 。 经 过 近 几 年 的 发 展 ， 图 像 、 声 音 、 动 画 、 视 频 
和 3D 等 技术 在 因特网 上 广泛 应 用 , 网 站 已 经 发 展 成 图 文 并 茂 的 样子 , 并 且 通 过 动态 网 页 技术 ， 
用 户 可 以 与 其 他 用 户 或 者 网 站 管理 者 进行 交流 。 

网 页 常见 的 构成 元 素 有 文本 、 图 像 、 超 链接 、 表 格 、 表 单 、 导 航 栏 、 动 画 、 框 架 等 。 如 图 
1-2 所 示 。 


图 1-2 网 页 常见 构成 元 素 

@ 文本 。 网 页 中 的 信息 主要 以 文本 为 主 。 在 网 页 中 可 以 通过 字体 、 大 小 、 闫 色 、 底 纹 、 
边框 等 来 设计 文本 的 属性 。 

@ 图 像 有 了 图 像 ， 才 能 看 到 丰富 多 彩 的 网 页 。 网 页 上 的 图 片 为 JPG 或 GIF 格式 .通常 
图 片 会 被 运用 在 Logo、Banner 和 背景 图 上 。Logo 是 代表 企业 形象 或 栏目 内 容 的 标志 
性 图 片 ， 一 般 在 网 页 的 左上 角 。Banner 是 用 于 宣传 网 站 内 某 个 栏目 或 活动 的 广告 ， 一 
般 要 求 制作 成 动画 形式 ， 达 到 宣传 的 效果 。Banner 一 般 位 于 网 页 的 顶部 和 底部 。 在 网 
页 页 面 中 比较 常用 的 图 片 还 包括 背景 图 ， 但 要 慎 用 背景 图 ， 除 非 设计 者 自信 背景 图 可 
以 给 网 页 增加 不 少 魅力 。 

@ 超 链接 。 超 链接 是 网 站 的 灵魂 ， 从 一 个 网 页 指向 另 一 个 目的 端的 链接 。 目 的 端 通常 是 
一 个 网 页 ， 也 可 以 是 一 幅 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 、 一 个 程序 或 者 是 本 网 
页 中 的 其 他 位 置 。 超 链接 本 身 可 以 是 文字 或 者 图 片 。 
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@ 表格 。 表格 是 网 页 中 展现 数据 的 主要 方式 ， 能 够 以 表 的 形式 显示 数据 信息 。 表 格 也 可 
以 用 作 网 页 排版 ， 在 很 长 一 段 时 间 内 ， 使 用 表格 排版 是 网 站 的 首选 方式 

@ 表单 。 表 单 是 用 来 收集 站 点 访问 者 信息 的 集合 。 站 点 访问 者 填写 表单 的 方式 是 输入 文 
本 、 单 击 单 选 按 钮 与 复 选 框 ， 以 及 从 下 拉 菜 单 中 选择 选项 。 在 填 好 表单 之 后 ， 站 点 访 
问 者 便 送 出 所 输入 的 数据 ， 该 数据 会 根据 网 站 设计 者 所 设置 的 表单 处 理 程序 ， 以 各 种 
不 同 的 方式 进行 处 理 。 

@ 导航 栏 。 导 航 栏 是 一 组 超 链接 ， 一 般 用 于 网 站 各 部 分 内 容 间 相互 链接 的 指引 。 导 航 栏 
可 以 是 按钮 或 者 文本 超 链接 。 

@ 动画 。 动 画 是 网 页 上 最 活跃 的 元 素 ， 包 括 GIF 动画 和 FLASH 动画 。 


网 页 中 除了 这 些 最 基本 元 素 外 ， 还 包括 横幅 广告 、 字 幕 、 悬 停 按钮 、 计 数 器 、 音 频 、 视 频 等。 
1.2 如 何 设计 网 页 


作为 传播 信息 的 一 种 载体 ， 网 页 同 其 他 出 版 物 如 报纸 、 杂 志 等 在 设计 上 有 许多 共同 之 处 ， 
也 要 遵循 一 些 设计 的 基本 原则 。 但 是 ， 由 于 表现 形式 、 运 行 方式 和 社会 功能 的 不 同 ， 网 页 设计 
又 有 其 自身 的 特殊 规律 。 


1.2.1 网 页 设计 基本 原则 

网 页 设计 是 技术 与 艺术 的 结合 , 内 容 与 形式 的 统一 。 它 要 求 设计 者 必须 遵循 以 下 三 个 主要 
原则 。 

1， 主题 鲜明 

一 个 网 页 需要 有 一 个 明确 的 主题 , 并 能 够 以 鲜明 的 样式 吸引 其 他 浏览 者 的 注意 。 这 就 要 求 
视觉 设计 一 定 要 有 目标 和 要 求 ， 有 明确 的 主题 ， 并 在 最 短 时 间 内 被 浏览 者 接收 。 

网 站 主题 决定 了 网 页 设计 风格 ， 只 有 主题 表达 清楚 了 ， 才 能 够 添加 艺术 信息 。 一 个 网 站 再 


美 ， 没 有 主题 信息 ， 也 不 会 有 浏览 者 访问 。 例 如 ， 某 个 旅游 网 站 所 展现 的 都 是 旅游 方面 信息 ， 
而 不 是 其 他 信息 ， 如 图 1-3 所 示 。 


图 1-3 主体 明确 
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2. 形式 与 内 容 统一 


有 名 俗话 , 叫 表里如一 , 用 在 网 页 设计 中 是 非常 恰当 的 。 任何 一 个 网 站 都 存在 内 容 和 形式 ， 
内 容 就 是 要 表达 的 对 象 ， 形 式 就 是 内 容 的 表现 方式 , 例如 一 则 新 闻 ， 新 闻 本 身 是 就 是 内 容 ， 具 
有 极 高 的 价值 ， 而 形式 就 是 新 闻 显示 的 方式 和 样式 ， 如 文本 显示 ， 此 时 需要 配置 布局 、 措 配 颜 
色 。 

在 网 页 设计 中 ， 内 容 可 以 说 是 主题 、 题 材 等 元 素 的 总 和 ， 形 式 就 是 它 的 结构 、 风 格 和 设计 
语言 。 内 容 主宰 形式 ， 形 式 影响 内 容 。 形 式 必 须 符合 内 容 ， 二 者 才能 相得益彰 。 如 果 只 追求 花 
哨 的 表现 形式 以 及 惊人 的 冲击 效果 , 或 者 只 是 追求 内 容 而 缺乏 任何 的 艺术 表现 , 此 时 网 页 设计 


图 1-4 内 容 形式 统一 


3. 强调 整体 


网 页 整体 效果 ， 即 整体 风格 ， 是 网 页 设计 者 必须 要 追求 的 。 正 如 一 个 人 不 能 上 身 穿 西 装 ， 
下 身 穿 裤头 , 脚 上 穿 雨 靳 。 网 页 是 用 来 传播 信息 的 一 种 媒体 。 它 所 承载 的 信息 必须 具备 一 定价 
值 ， 有 一 定 的 内 容 、 主 题 和 意念 ， 才 能 够 被 人 们 所 接受 。 

然而 , 过 分 追求 整体 效果 , 会 牺牲 页 面 个 体 的 灵活 性 。 所 以 , 在 强调 网 页 整体 设计 的 同时 ， 
还 应 注意 网 页 个 体 灵 活性 ， 不 然 网 页 就 会 显得 呆板 、 沉 问 、 枯 燥 ， 从 而 影响 访问 者 的 热情 或 济 
览 欲望 。 
1.3.2 ”网 页 设计 成 功 要 素 

各 个 成 功 的 网 站 ,之 所 以 能 够 吸引 眼球 ， 具 有 较 大 的 浏览 量 ， 必 然 有 一 些 相同 的 元 素 。 我 
们 将 这 些 网 站 的 成 功 元 素 提取 出 来 , 使 初学 者 能 够 尽快 掌握 ， 从 而 设计 出 优秀 的 网 页 。 网 站 设 
计 成 功 要 素 有 : 整体 布局 、 有 价值 信息 、 速 度 、 图 形 和 版 面 设计 、 文 字 可 读 性 、 网 页 标题 可 读 
性 、 网 站 导航 、 词 语 准 确 。 

1. 整体 布局 

网 页 是 访问 者 最 先 看 到 的 信息 ,能 够 在 第 一 时 间 引 人 注意 , 才能 把 读者 留 下 来 。 好 的 网 页 
应 该 干净 整洁 、 条 理 清楚 、 引 人 入 胜 。 而 不 是 将 读者 注意 力 放 到 一 个 杂乱 的 环境 中 ,过 多 的 闪 
烁 、 色 彩 、 下 拉 菜 单 框 、 图 片 等 会 将 读者 注意 力 分 散 。 


4。 
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2. 有 价值 信息 


无 论 何 种 站 点 , 其 目的 都 是 给 读者 提供 一 定 的 信息 ,这 样 读者 才 会 选择 留 下 来 阅读 。 这 些 
有 价值 信息 ， 可 以 是 新 闻 、 娱 乐 信息 。 如 果 是 企业 网 站 ,需要 提供 关于 产品 和 服务 的 信息 ， 这 
些 信 息 必须 便于 理解 和 查询 。 


$i 建 度 

如 果 不 能 在 20~30 秒 之 内 打开 一 个 网 页 ， 一般人 就 会 没有 耐心 。 因 此， 在 设计 网 页 的 过 
程 中 ， 应 该 确保 主页 速度 尽 可 能 快 ， 最 好 不 要 用 大 的 图 片 。 

4. 图 形 和 版 面 设计 


图 形 和 版 面 设计 关系 到 浏览 者 对 网 页 的 第 一 印象 ,图 形 应 集中 反映 主页 所 期 望 传达 的 主要 
信息 。 例 如 下 面 的 网 页 ， 其 Logo 放 在 左上 角 ， 并 且 版 面 整齐 、 布 局 合理 ， 如 图 1-5 所 示 。 


图 1-5 版 面 设计 


5. 文字 可 读 性 


在 设计 网 页 中 的 文字 信息 时 , 一 定 要 给 文字 周围 留 有 足够 的 空间 , 这 样 才能 使 浏览 者 感觉 
不 到 压抑 ; 另外 , 文字 的 颜色 最 好 不 要 使 用 紫色 、 橙色 和 红色 , 因为 这 些 颜 色 会 让 人 了 眼花 综 乱 。 

另 一 种 能 够 提高 文字 可 读 性 的 因素 是 所 选择 的 字体 , 通用 字体 最 易 阅 读 , 特殊 字体 用 于 标 
题 效 果 较 好 ， 不 适合 正文 。 

6. 网 页 标题 可 读 性 


网 页 标题 必须 容易 阅读 , 需要 为 所 有 标题 和 副标题 设置 同一 字体 , 并 将 标题 字体 加 大 一 号 ， 
所 有 标题 和 副标题 都 采用 粗 体 ， 这 样 便于 识别 标题 (如 字体 加 大 加 粗 ) 和 副标题 (如 粗 体 ,与 
正文 字体 大 小 相同 ) ， 使 浏览 者 一 眼 就 可 以 看 到 要 点 ， 以 便 找 出 并 继续 阅读 感 兴趣 的 内 容 。 


7. 网 站 导航 
由 于 人 们 习惯 于 从 左 到 右 、 从 上 到 下 阅读 ， 所 以 导航 条 通常 应 放置 在 页 面 左 边 ,对 于 较 长 


的 页 面 来 说 , 在 最 底部 设置 一 个 简单 导航 也 很 有 必要 。 确定 一 种 满意 模式 之 后 ,最 好 将 这 种 模 
式 应 用 到 同一 网 站 的 每 个 页 面 ， 这 样 ， 浏 览 者 就 知道 如 何 寻找 信息 了 。 
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8. 词语 准确 

一 个 网 站 如 果 只 有 漂亮 的 外 观 而 词语 错误 连篇 、 语 法 混乱 ， 同 样 是 失败 的 ， 因 此 ,应 注意 
词语 的 准确 无 误 。 
1.2.3 ”网 页 设计 风格 及 色彩 搭配 

网 站 设计 要 注意 的 两 个 要 点 ， 即 整体 风格 和 色彩 搭配 。 

1. 确定 网 站 整体 风格 

同一 个 主题 ， 任 何 两 人 都 不 可 能 设计 出 完全 一 样 的 网 站 。 风 格 〈style) 是 抽象 的 ， 是 指 站 
点 的 整体 形象 给 浏览 者 的 综合 感受 。 例如 , 我 们 感觉 网 易 是 平易 近 人 的 , 迪斯尼 是 生动 活泼 的 ， 


IBM 是 专业 严肃 的 ， 这 些 都 是 网 站 给 人 们 留 下 的 不 同感 受 。 例 如 下 面 的 网 站 首页 ， 风 格 简洁 、 
大 方 ， 主 题 明确 ， 如 图 1-6 所 示 。 


| 陵 想 可 硬 | | | 


PETC 


图 1-6 整体 风格 
2. 网 页 色彩 搭配 


无 论 是 平面 设计 ， 还 是 网 页 设计 ， 色 彩 永远 是 最 重要 的 一 环 。 当 距离 显示 屏 较 远 的 时 候 ， 
人 们 看 到 的 不 是 优美 的 版 式 或 美丽 的 图 片 ， 而 是 网 页 的 色彩 。 例 如 下 面 的 网 页 ， 其 颜色 以 浅 色 
为 主 色 调 ， 背 景色 为 青色 ， 从 而 衬托 文字 和 图 片 效果 ， 如 图 1-7 所 示 。 


CISCO 


1-7 色彩 搭配 
下 面 介绍 一 些 网 页 色彩 搭配 的 实战 经 验 。 
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@ 和 白 纸 黑 字 是 永远 的 主题 
@ 网 页 最 常用 流行 色 


蓝 色 一 一 蓝天 白云 ， 沉 静 整 洁 的 颜色 。 
绿色 一 一 绿 白 相 间 ， 雅 致 而 有 生气 。 
杰 色 一 一 活 泌 热烈， 标准 商 业 色 调 。 
暗 红 一 一 宁 重 、 严 肃 、 高 贵 ， 需 要 配 黑 和 灰 来 压制 刺激 的 红色 。 


@ 颜色 忌讳 


尽 脏 一 一 背景 与 文字 内 容 对 比 不 强烈 ， 灰 暗 的 背景 令 人 泪 表 。 

尽 纯 一 一 艳丽 的 纯色 对 人 的 刺激 太 强 烈 ， 缺 乏 内 涵 。 

鼠 花 一 一 要 有 一 种 主 色 贯 穿 其 中 , 主 色 并 不 是 面积 最 大 的 颜色 ,而 是 最 重要 、 最 能 揭示 和 
反映 主题 的 颜色 。 

鼠 粉 一 一 颜色 浅 固然 显得 干净 ， 但 如 果 对 比 过 弱 ， 就 会 显得 苍白 无 力 。 

蓝 色 鼠 纯 ， 绿 色 忌 黄 ， 红 色 忌 艳 。 


@ 几 种 固定 搭配 


蓝 白 橙 一 一 蓝 为 主 调 。 白 底 ， 蓝 标题 栏 ， 橙 色 按钮 或 ICON 做 点 级 。 

绿 白兰 一 一 绿 为 主 调 。 白 底 ， 绿 标题 栏 ， 兰 色 或 橙色 按钮 或 ICON 做 点 组 。 
橙 白 红 一 一 栖 为 主 调 。 白 底 ， 橙 标题 栏 ， 暗 红 或 桔 红 色 按 钮 或 ICON 做 点 级 。 
暗 红 黑 一 一 暗 红 主 调 。 黑 或 灰 底 ， 暗 红 标 题 栏 ， 文 字 内 容 背 景 为 浅 灰色 。 


1.3 ”网 页 设计 师 应 具备 的 素质 


当 打开 网 站 时 , 首先 映 入 眼帘 的 是 该 网 页 的 界面 设计 , 如 内 容 介 绍 、 按钮 摆 放 、 文字 组 合 、 
色彩 应 用 、 网 页 导航 等 ， 这 些 都 是 网 页 设计 师 的 工作 。 作 为 一 个 优秀 的 网 页 设计 师 ， 需 要 同时 
具备 艺术 素质 、 技 能 素质 和 综合 素质 。 


1.3.1 艺术 素质 


美 是 包含 或 体现 社会 生活 的 本 质 、 规 律 ， 引 起 人 们 的 特定 情感 反映 的 具体 形象 (包括 
社会 形象 、 自 然 形象 和 艺术 形象 ) 。 审 美能 力 是 个 人 所 具有 与 审美 活动 相关 的 主观 条 件 和 
心理 能 

作为 一 名 网 页 设计 师 ， 要 使 自己 的 网 页 具有 美感 ， 就 要 平时 多 积累 ， 在 仔细 观察 的 基础 上 
分 析 美的 来 源 , 并 灵活 地 将 这 种 美 在 自己 作品 中 表现 出 来 。 只 有 这 样 才 能 使 自己 的 审美 能 力 达 
到 一 定 的 高 度 。 

网 页 设计 中 所 蕴含 的 美 , 是 通过 视听 来 实现 的 。 在 网 页 设计 中 恰当 引导 访问 者 的 视 (文字 、 
图 形 、 动画) 、 听 (声音 ) 这 两 种 感官 ， 使 其 获得 “美感 ”， 是 设计 中 的 关键 。 例 如 下 面 的 网 
站 首页 ， 通 过 色彩 、 图 片 和 创意 将 美发 挥 出 来 ， 如 图 1-8 所 示 。 
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【加 


图 1-8 某 网 站 首页 
1.3.2 ”技能 素质 
优秀 的 网 页 设计 师 应 该 熟练 掌握 技术 ， 并 在 技术 和 美 之 间 ， 找 到 一 个 结合 点 ， 设 计 出 美观 


而 实用 的 网 页 。 

技术 问题 是 网 页 设计 的 核心 。 网 页 设计 者 不 仅 要 考虑 设计 给 用 户 的 感觉 、 用 户 访问 站 点 的 
目的 ， 同 时 还 要 考虑 自己 如 何 运用 技术 把 思想 表达 出 来 ， 需 要 哪些 工具 、 哪 些 素 材 。 这 些 就 要 
靠 自己 的 日 积 月 累 ， 牢 牢 地 把 握 住 行业 的 动态 。 


1.3.3 ”综合 素质 


作为 合格 的 网 页 设计 师 , 一 定 的 文化 素质 是 不 可 少 的 ,当然 文化 素质 不 仅仅 包括 文学 修养 ， 
还 有 音乐 和 绘画 等 方面 的 修养 ,只 有 具备 这 些 方面 的 修养 ,才能 够 使 自己 网 页 达到 一 定 的 水 准 ， 
才能 够 制作 出 令 人 欣赏 的 好 网 页 。 

网 页 设计 者 的 素质 在 一 两 天 内 不 会 有 太 大 的 变化 ， 它 是 随 着 时 间 靠 辛勤 劳动 积累 下 来 的 。 
因此 , 要 想 成 为 一 名 真正 的 设计 高 手 , 网 页 设计 者 不 仅 要 有 一 颗 真 诚 为 浏览 者 服务 的 心 , 还 要 
广泛 涉猎 各 个 领域 的 先进 成 果 , 特别 是 要 提高 自己 的 艺术 修养 、 文学 水 平 以 及 鉴 党 能力， 只 要 
用 心 了 ， 就 离 成 功 不 远 了 。 


1.4 专家 解 惑 


1. 网 页 设计 中 ， 如 何 使 用 图 像 ? 


图 像 内容 应 有 一 定 的 实际 作用 ， 切 鼠 虚 饰 浮 压 。 图 画 可 以 弥补 文字 的 不 足 ， 但 并 不 能 够 完 
全 取代 文字 。 很 多 用 户 把 浏览 软件 设 定 为 略 去 图 像 ， 只 看 文字 ， 以 求 节省 时 间 。 因 此 ， 制 作 主 
页 时 , 必须 注意 将 图 像 所 连接 的 重要 信息 或 连接 其 他 页 面 的 指示 用 文字 重复 表达 几 次 , 同时 要 
注意 避免 使 用 过 大 的 图 像 , 如 果 不 得 不 放置 大 的 图 像 在 网 站 上 , 应 该 把 图 像 的 缩小 版 本 的 预览 
效果 显示 出 来 ， 这 样 用 户 就 不 必 浪 费时 间 去 下 载 他 们 根本 不 想 看 到 的 大 图 像 。 
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2. 如 何 使 用 动画 ? 

大 家 都 喜欢 用 GIF 动画 来 装饰 网 页 ， 它 的 确 很 吸引 人 ， 但 在 选择 时 ， 要 确定 是 否 必须 使 
用 GIF 动画 ， 如 果 回 答 是 否定 的 ， 那 么 就 选择 静止 的 图 片 ， 因 为 它 的 容量 要 小 得 多 。 同 样 的 
尺寸 的 LOGO，GHIF 动画 的 容量 有 SKB， 而 静止 的 LOGO 只 有 3KB 。 虽 然 只 有 2KB 之 差 , 但 
数量 多 了 ， 就 会 影响 下 载 的 速度 ， 所 以 ， 如 果 不 是 必须 的 ， 就 选择 静止 图 片 。 

3. 网 页 设计 对 HTML 代码 要 求 大 么 ? 

为 了 成 功 地 设计 网 站 ， 必 须 理解 HTML 是 如 何 工作 的 。 建 议 新 手 应 从 HTML 书 中 去 寻找 
答案 。 因 为 用 HTML 设计 网 站 ， 可 以 控制 设计 的 整个 过 程 。 
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< HTML 网 页 文档 结构 > 


HTML 用 标记 来 表示 文档 中 的 文本 及 图 像 等 元 素 ， 并 规定 浏览 器 如 何 显示 这 些 元 素 ， 以 
及 如 何 响应 用 户 的 行为 。 它 是 标准 通用 语言 (Standard Generalized Markup Language，SGMI) 
的 一 种 应 用 。 本 章 主要 介绍 HTML 的 网 页 文档 结构 。 


2.1 HTML 代码 的 结构 


HTML 语言 是 用 来 描述 网 页 的 一 种 语言 ， 它 是 一 种 标记 语言 ， 而 不 是 编程 语言 ， 它 是 制 
作 网 页 的 基础 语言 ， 主 要 用 于 描述 超 文本 中 内 容 的 显示 方式 。 下 面 介绍 HTML 代码 的 基本 结 
构 。 


2.1.1 HTML 代码 的 组 成 


在 一 个 HTML 文档 中 ， 必 须 包 含 <html></html> 标 记 ， 并 且 放 在 一 个 HTML 文档 的 开始 
和 结束 位 置 。 即 每 个 文档 以 <html> 开 始 ， 以 </html> 结 束 。<html></hmtl> 之 间 通 常 包含 两 个 
部 分 ， 分 别 为 <head></head> 和 <body></body>，head 标记 包含 HTML 头 部 信息 ， 例 如 文档 
标题 、 样 式 定 义 等 。body 包含 文档 主体 部 分 ， 即 网 页 内 容 。 需 要 注意 的 是 ，HTML 标记 不 
区 分 大 小 写 。 

为 了 便于 读者 从 整体 把 握 HTML 文档 结构 , 下 面 通过 一 个 HTML 页 面 来 介绍 HTML 页 面 
的 整体 结构 ， 示 例 代 码 如 下 所 示 。 


<html> 

<head> 

<title> 网 页 标题 </title> 
</head> 

<body> 

网 页 内 容 
</body> 
</html> 


从 上 面 的 代码 可 以 看 出 ， 基 本 的 HTML 代码 由 以 下 几 部 分 构成 。 


@ <html></html>: 说 明 本 页 面 使 用 HTML 语言 编写 ,浏览 器 软件 能 够 准确 无 误 地 进行 
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解释 和 显示 。 

@ <head></head>: HTML 的 头 部 标记 ， 头 部 信息 不 显示 在 网 页 中 ,此 标记 内 可 以 存在 其 
他 标记 。 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公 用 属性 。 可 以 通过 <style> 标 记 定 义 
CSS 样式 表 ， 通 过 <scrip 亿 标记 定义 JavaScript 脚本 文件 。 

@ <title></title>: title 是 head 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显示 在 浏览 器 的 窗口 标 
题 栏 中 。 如 果 没 有 title， 浏 览 器 标题 栏 显示 本 页 的 文件 名 。 

@ <body></body>: body 包含 HTML 页 面 的 实际 内 容 ， 显 示 在 浏览 器 窗口 的 客户 区 中 。 
例如 ， 页 面 中 的 文字 、 图 像 、 动 画 、 超 链接 以 及 其 他 HTML 相关 的 内 容 都 定义 在 body 
标记 里 面 。 


2.1.2 ”代码 注释 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 不 在 浏览 器 的 页 面 中 显示 。 在 HIML 源 代 
码 中 适当 地 插入 注释 语句 是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 修改 、 维 护 工作 都 很 有 
好 处 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 懂 前 者 所 编写 的 内 容 。 

其 语法 为 : 


<!-- 注 释 的 内 容 --> 


注释 语句 元 素 由 前 后 两 部 分 组 成 , 前 半 部 分 由 一 个 左 尖 括号 、 一 个 半角 感叹 号 和 两 个 连 字 
符 组 成 ， 后 半 部 分 由 两 个 连 字符 和 一 个 右 尖 括 号 组 成 。 


<html> 

<head> 

<title> 标 记 测试 </title> 

</head> 

<body> 

<!-- 这 里 是 标题 -> 
<hl>HTML 网 页 文档 结构 </h1> 
</body> 

</html> 


页 面 注释 不 但 可 以 对 HTML 中 一 行 或 多 行 代 码 进行 解释 说 明 , 而 且 可 以 注释 掉 这 些 代码 。 
如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 可 以 将 这 部 分 内 容 放 在 <!-- 和 --> 之 间 ， 例 如 ， 
修改 上 述 代 码 如 下 。 


<html> 

<head> 
<title> 标 记 测 试 </title> 
</head> 

<body> 

I 


<hl>HTML 网 页 文档 结构 </hl> 
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a 
</html> 
修改 后 的 代码 ， 将 <h1> 标 记 作 为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 
2.2 HTML 的 基本 标签 
标签 是 HTML 语言 中 最 基本 的 单位 ， 每 个 标签 由 “<” 开 始 ， 由 “>” 结 束 。 标 签 通过 指 
定 某 块 信息 为 段落 或 标题 来 标识 文档 某 个 部 件 。 
2.2.1 HTML 标记 <html> 


HTML 标记 代表 文档 的 开始 ， 由 于 HTML 语言 语法 的 松散 特性 ， 该 标记 可 以 省 略 ， 但 是 
为 了 使 之 符合 Web 标准 和 文档 的 完整 性 ， 养 成 良好 的 编写 习惯 ， 建 议 不 要 省 略 该 标记 。 

HTML 标记 以 <html> 开 头 ， 以 </html> 结 尾 ， 文 档 的 所 有 内 容 书写 在 开头 和 结尾 的 中 间 部 
分 。 语 法 格式 如 下 。 

<html> 

Te 
2.2.2 head 标签 及 其 属性 

头 标记 head 用 于 说 明文 档 头 部 相关 信息 ， 一 般 包括 标题 信息 、 元 信息 、 定 义 CSS 样式 和 
脚本 代码 等 。HTML 的 头 部 信息 以 <head> 开 始 ， 以 </head> 结 束 ， 语 法 格式 如 下 。 


<head> 


</head> 

<head> 元 素 的 作用 范围 是 整 篇 文档 ， 定 义 在 HTML 语言 头 部 的 内 容 往往 不 会 在 网 页 上 直 
接 显示 。 

1. 标题 标记 title 

HTML 页 面 的 标题 一 般 用 来 说 明 页 面 的 用 途 ， 它 显示 在 浏览 器 的 标题 栏 中 。 在 HTML 文 
档 中 ,标题 信息 设置 在 <head> 与 </head> 之 间 。 标 题 标 记 以 <title> 开 始 ， 以 </title> 结 束 ， 语 法 格 
式 如 下 。 


<title> 
tite> 
在 标记 中 间 的 “... ”就 是 标题 的 内 容 ， 它 可 以 帮助 用 户 更 好 地 识别 页 面 。 预 览 网 页 时 
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设置 的 标题 在 浏览 器 的 左上 方 标题 栏 中 显示 ， 此 外 ， 在 Windows 任务 栏 中 显示 的 也 是 这 个 标 
题 ， 如 图 2-1 所 示 。 


DD/ ox] er] CE 


Er ED 


可 手机 呈 | 采 ， 共和 光宇 + 请 三 了 之 去 用 TE 
. 


淘 红 网 维 巴 一 一 


RR 
wh 人 

失信 二 到 洒 光 全 ; xX “Eg 

本 中 心 电子 书 全 于 了 大 中 GS 

共生 后 量 

和 由 二 SR 和 

水 电 虹 加 时 菇 本 人 Sr i 

风 5 动 Rm cent 下 A 风 全 四 


do + EE 
人 作乐 看 + 沈 和 天 Ed 口 帆 它 亡 关内 二 全- 


图 2-1 标题 栏 在 浏览 器 中 的 显示 效果 


Ck 


国 页 面 的 标题 只 有 一 个 ， 它 们 位 于 HTML 文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 | 


2. 元 信息 标记 meta 


<meta> 元 素 可 提供 有 关 页 面 的 元 信息 (meta-information) ， 比 如 针对 搜索 引擎 和 更 新 频 
度 的 描述 和 关键 词 。 
<meta> 标 签 位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标 签 的 属性 定义 了 与 文档 相关 联 
的 名 称 / 值 对 ，<meta> 标 签 提供 的 属性 及 取 值 如 表 2-1 所 示 。 


属性 


charset 


表 2-1 <meta> 标 签 提 供 的 属性 及 取 值 


content 


http-equiv 


name 


character encoding 定义 文档 的 字符 编码 
some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 


content-type 
expires 


把 content 属性 关联 到 HITP 头 部 
refresh 


set-cookie 
author 
description 
keywords 
generator 
revised 
others 


把 content 属性 关联 到 一 个 名 称 


(1) 字符 集 charset 属性 
在 HTML 中 ， 有 一 个 新 的 charset 属性 ， 它 使 字符 集 的 定义 更 加 容易 。 例 如 ， 下 列 代码 告 
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诉 浏览 器 ， 网 页 使 用 “ISO-8859-1” 字 符 集 显示 。 
<meta charset="ISO-8859-1"> 


(2) 搜索 引擎 的 关键 字 


在 早期 ，Meta Keywords 关键 字 对 搜索 引擎 的 排名 算法 起 到 一 定 的 作用 ， 也 是 很 多 人 进行 
网 页 优化 的 基础 。 关 键 字 在 浏览 时 是 看 不 到 的 ， 其 格式 如 下 。 


<meta name="keywords" content=" 关 键 字 .keywords" /> 
说 明 : 


@ 不 同 的 关键 字 之 间 ， 应 用 半角 过 号 隔 开 (英文 输入 状态 下 )， 不 要 使 用 空格 或 “|” 间 
隔 。 

@ 是 “keywords”， 不 是 “keyword”。 

@ 关键 字 标 签 中 的 内 容 应 该 是 一 个 个 的 短语 ， 而 不 是 一 段 话 。 


例如 ， 定 义 针对 搜索 引擎 的 关键 字 ， 代 码 如 下 。 
<meta name="keywords" content="HTML, CSS., XML. XHTML, JavaScript" /> 


关键 字 标 签 Keywords， 曾 经 是 搜索 引擎 排名 中 很 重要 的 因素 ， 但 现在 已 经 被 很 多 搜索 引 
擎 完全 忽略 。 加 上 这 个 标签 对 网 页 的 综合 表现 没有 坏处 , 不过， 如 果 使 用 不 恰当 的 话 ， 对 网 页 
非但 没有 好 处 ， 还 有 欺诈 的 嫌疑 。 在 使 用 关键 字 标签 Keywords 时 ， 要 注意 以 下 几 点 : 


@ 关键 字 标 签 中 的 内 容 要 与 网 页 核心 内 容 相 关 ， 确 保 使 用 的 关键 字 出 现在 网 页 文本 中 。 

@ 使 用 用 户 易 于 通过 搜索 引擎 检索 的 关键 字 , 过 于 生僻 的 词汇 不 太 适 合作 为 meta 标签 中 
的 关键 字 。 

@ 不 要 重复 使 用 关键 宇 ， 否 则 可 能 会 被 搜索 引擎 惩罚 。 

@ 一 个 网 页 的 关键 字 标 签 里 最 多 包含 3~5 个 最 重要 的 关键 字 ， 不 要 超过 5 个 。 

@ 每 个 网 页 的 关键 字 应 该 不 一 样 。 


丑 司 由 于 设计 者 或 SEO 优化 者 以 前 对 Meta Keywords 关键 字 的 混用， 导致 目前 它 在 搜 
索引 擎 排名 中 的 作用 很 小 。 


改 


(3 ) 页面 描述 


Meta Description 元 标签 〈 描 述 元 标签 》 是 一 种 HTML 元 标签 ， 用 来 简略 描述 网 页 的 主要 
内 容 , 通常 被 搜索 引擎 用 在 搜索 结果 页 上 显示 给 最 终 用 户 看 的 一 段 文字 片段 。 在 网 页 中 不 显示 
页 面 描述 ， 页 面 描述 的 使 用 格式 如 下 。 


<meta name="description" content=" 网 页 的 介绍 " /> 


例如 ， 定 义 对 页 面 的 描述 ， 代 码 如 下 。 
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<meta name="description" content=" 免 费 的 web 技术 教程 。" /> 

(4) 页面 定时 跳 转 

使 用 <meta> 标 记 可 以 使 网 页 在 经 过 一 段 时 间 后 自动 刷新 ,可 通过 将 http-equiv 属性 值 设 置 
为 refresh 来 实现 。Content 属性 值 可 以 设置 为 更 新 时 间 。 

我 们 在 浏览 网 页 时 经 常会 看 到 一 些 欢 迎 信息 的 页 面 , 经 过 一 段 时间 后 , 这 些 页 面 会 自动 转 
到 其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 页 面 定时 刷新 跳 转 的 语法 格式 如 下 。 


<meta http-equiv="refresh" content=" 秒 :[url= 网 址 ]" 户 


加 上 面 的 [url= 网 址 ] 部 分 是 可 选项 ， 如 果 有 这 部 分 ， 页 面 定时 刷新 并 跳 转 ， 如 果 省 略 | 


e 该 部 分 ， 页面 只 定时 刷新 ， 不 进行 跳 转 。 


例如 ， 要 实现 每 5 秒 刷 新 一 次 页 面 ， 将 下 述 代码 放 入 head 标记 部 分 即 可 。 
<meta http-equiv="refresh" content="5" /> 
2.2.3 body 标签 及 其 属性 


Body 标签 定义 文档 的 主体 。Body 标签 包含 文档 的 所 有 内 容 〈 如 文本 、 超 链接 、 图 像 、 表 
格 和 列表 等 ) 。 网 页 所 要 显示 的 内 容 都 放 在 网 页 的 主体 标记 内 ， 它 是 HTML 文件 的 重点 。 主 
体 标 记 以 <body> 标 记 开始 ， 以 </body> 标 记 结束 ， 语 法 格式 如 下 。 


<body> 


</body> 


注意 ， 在 构建 HTML 结构 时 ， 标 记 不 允许 交错 出 现 ， 否 则 会 出 现 错误 。 
例如 ， 在 下 列 代码 中 ，<body> 开 始 标记 出 现在 <head> 标 记 内 。 


<html> 
<head> 
<title> 标 记 测试 </title> 
<body> 
</head> 
</body> 
</html> 


代码 中 的 第 4 行 <body> 开 始 标记 和 第 5 行 的 </head> 结 束 标记 出 现 了 交叉 ,这 是 错误 的 。 
HTML 中 的 所 有 代码 都 是 不 允许 交错 出 现 的 。 
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2.3 HTML 文件 的 编写 方法 


HTML 文本 的 编写 方法 有 两 种 ， 分 别 如 下 : 


@ 手工 编写 HTML 文件 。 
@ 使 用 HTML 编辑 器 。 


2.3.1 手工 编写 HTML 文件 


由 于 HTML 是 一 种 标记 语言 ， 主 要 以 文本 形式 存在 ， 因 此 ， 所 有 的 记事 本 工具 都 可 以 作 
为 它 的 开发 环境 。HTML 文件 的 扩展 名 为 .html 或 htm， 将 HTML 源 代码 输入 到 记事 本 并 保存 
之 后 ， 可 以 在 浏览 器 中 打开 文档 以 查看 效果 。 

【 例 2.1】 使 用 记事 本 编写 HTML 文件 

具体 操作 步骤 如 下 。 


0 和 单 击 Windows 桌面 上 的 【开始 〗 按 钮 ， 选 择 【 所 有 程序 〗 二 【附件 】〗 二 【记事 本 】 
命令 ， 打 开 一 个 记事 本 ， 在 记事 本 中 输入 HTML 代码 。 如 图 2-2 所 示 。 

to3 编辑 完 HTML 文件 后 ， 选 择 【 文 件 〗>【 保 存 】 命 令 或 按 Ctrl+S 快捷 键 ， 在 弹出 的 
【另存 为 】 对 话 框 中 ,选择 【保存 类 型 为 【所 有 文件 〗， 然 后 将 文件 扩展 名 设 为 .html 或 .htm， 
如 图 2-3 所 示 。 


文件 (站 ”六 强 (E) 合式 (O) 下 看 (V) 灵巧 (H) 


<hl?Jly First HeadingC/hl> 
<h2>This is a headingc/h2> 
<h3>This is a headingc/h3> 
《py first paragraph. </p> 


<p?This is another paragraph. </p> 
</body> 
</html> 


图 2-2 编辑 HTML 代码 | | 图 23 【另存 为 】 对 话 杠 
tO3j 单 击 【保存 】〗 按 钮 ， 保 存 文件 。 打 开 网 页 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 2-4 所 


EE 可 以 使 用 记事 本 编写 HTML 文件 ， 但 是 编写 效率 太 低 ， 它 对 于 语法 错误 及 格式 都 | 
没有 提示 。 
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2.3.2 ”使 用 HTML 编辑 器 


2 2 rn 


en RB FEV GEA TR Wo 


| 
‘My First Heading 


This is a heading 


a heading 


图 2-4 网 页 的 浏览 效果 


使 用 HTML 编辑 器 可 以 弥补 记事 本 编写 HTML 文件 的 缺陷 ,目前 ,有 很 多 专门 编辑 HTML 
网 页 的 编辑 器 ， 其 中 ，Adobe 公司 出 品 的 Dreamweaver CS5.5 用 户 界面 非常 友好 ， 是 一 个 非常 
优秀 的 网 页 开发 工具 ， 并 深 受 广大 用 户 的 喜爱 。 
Dreamweaver CS5.5 中 有 很 多 面板 ， 以 后 在 使 用 时 再 做 详细 讲解 。 打 开 的 面板 越 多 ， 编 辑 
文档 的 区 域 就 越 小， 为 了 便于 编辑 文档 ， 可 以 通过 F4 功能 键 快速 隐藏 和 显示 所 有 面板 。 
【 例 2.2】 使 用 Dreamweaver CS5.5 编写 HTML 文件 


具体 操作 步骤 如 下 。 


0 和 启动 Dreamweaver CS5.5， 如 图 2-5 所 示 ， 在 欢迎 屏幕 中 【新 建 〗 栏 中 选择 [HTML】 
选项 。 或 者 单 击 菜单 中 的 【文件 〗>【 新 建 】 命 令 (快捷 键 CtlHN ) 。 


EE EE WW "| ji O cw 外 入 党 对 


2-5 包含 欢迎 屏幕 的 主 界面 


W022 弹出 【新 建文 档 〗 对 话 框 ， 如 图 2-6 所 示 ， 在 【页 面 类 型 】 选 项 中 ,选择 【HTML] 。 
03) 单 击 【 创 建 】 按 钮 ， 创 建 HIML 文件 ， 如 图 2-7 所 示 。 
t@ 绚 在 文档 工具 栏 中 ， 单 击 【代码 】 按 钮 ， 切 换 到 代码 视图 ， 如 图 2-8 所 示 。 
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图 2-6 【新 建文 档 】 对 话 框 
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2-7 设计 视图 下 显示 创建 的 文档 
0 a ae “| IE Or cw [IE 十 局 
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2-8 ”代码 视图 下 显示 创建 的 文档 
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05) 修改 HTML 文档 标题 , 将 代码 <title> 标 记 中 的 “无 标题 文档 ”修改 成 “第 一 个 网 页 ”。 
to6j 在 <body> 标 记 中 键入 “今天 我 使 用 Dreamweaver CS5.5 编写 了 第 一 个 简单 网 页 ， 感 
觉 非常 高 兴 。” 完 整 的 HTML 代码 如 下 所 示 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/ 
DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.wW3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 

<title> 第 一 个 网 页 </title> 

</head> 

<body> 

今天 我 使 用 Dreamweaver CS5.5 编写 了 第 一 个 简单 网 页 ， 感 觉 非 常 高 兴 。 


</body> 
</html> 


0 保存 文件 。 单 击 菜单 中 的 【文件 〗>【 保 存 】 或 按 下 Ctrl+S 快捷 键 ， 弹 出 【另存 为 了 
对 话 框 。 在 对 话 框 中 ， 选 择 保存 位 置 ， 并 输入 文件 名 ， 单 击 【 保 存 】〗 按 钮 ， 如 图 2-9 所 示 。 

W038 单 击 文档 工具 栏 的 力图 标 ,选择 查看 网 页 的 浏览 器 ， 或 按 下 F12 功能 键 使 用 默认 浏 
览 器 查看 网 页 ， 预 览 效 果 如 图 2-10 所 示 。 


RE Lo-e 
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RE 文件 (站 淆 矣 (E) 得 看 (V) 收 面 (A) 工具) 本 HI) 

ml 今天 我 使 用 Dreamweaver CS5.5 编 写 了 第 一 个 简单 网 页 ， 
2 感觉 非常 高 兴 。 
部 
m 
& 
En 
x - Cisg 

PA): [GE a a 
ed ”BEE 

end 各 0 Pe 
2-9 保存 文件 图 2-10 浏览 器 预览 效果 


2.4 使 用 浏览 器 查看 HTML 文件 
浏览 器 查看 效果 与 HTML 源 代码 是 开发 人 员 经 常 使 用 的 。 可 以 使 用 浏览 器 查看 网 页 的 显 
示 效 果 ， 也 可 以 在 浏览 器 中 直接 查看 HTML 源 代码 。 
2.4.1 各 大 浏览 器 与 HTML 的 兼容 


浏览 器 是 网 页 的 运行 环境 ， 因 此 使 用 的 浏览 器 类 型 也 是 在 网 页 设计 时 要 考虑 的 一 个 问题 。 
由 于 各 个 软件 厂商 对 HTML 的 标准 支持 有 所 不 同 ， 导 致 了 同样 的 网 页 在 不 同 的 浏览 器 下 会 有 
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不 同 的 表现 。 

另外 ， 对 于 HTML 新 增 的 功能 ， 各 个 浏览 器 的 支持 程度 也 不 一 致 ， 浏 览 器 的 因素 变 得 比 
以 往 传统 的 网 页 设计 更 重要 。 为 了 保证 设计 出 来 的 网 页 在 不 同 的 浏览 器 上 的 效果 一 致 , 本 书后 
面 的 章节 中 还 会 多 次 提 及 浏览 器 。 

目前 ， 市 面 上 的 浏览 器 种 类 繁多 ，Internet Explorer 是 占 绝对 主流 的 ， 因 此 ， 本 书 主要 使 
用 Internet Explorer 9.0 作为 浏览 器 。 不 过 ， 遇 到 正 浏览 器 不 能 支持 的 情况 ， 将 使 用 Firefox、 
Opera 或 者 其 他 能 支持 的 浏览 器 ， 这 点 请 读者 注意 。 


2.4.2 查看 页 面 效果 


双击 例 2.2 中 编写 的 HTML 文件 ， 在 正 9.0 浏览 器 窗口 中 可 以 看 到 编辑 的 HTML 页 面 效 
果 ， 请 参阅 图 2-10。 

前 面 已 经 介绍 过 , 网 页 可 以 在 不 同 的 浏览 器 中 查看 ,为 了 测试 网 页 的 兼容 性 ,可 以 在 不 同 
的 浏览 器 中 打开 网 页 。 

在 非 默认 浏览 器 中 打开 网 页 的 方法 有 很 多 种 ， 在 此 介绍 两 种 常用 方法 。 


@ 方法 一 : 选择 浏览 器 菜单 【文件 】 关 【打开 】〗( 有些 浏览 的 菜单 项 名 为 “打开 文件 ” )， 
选择 要 打开 的 网 页 即 可 。 

@ 方法 二 : 在 HTML 文件 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【打开 方式 】 命 令 ， 单 击 需 
要 的 浏览 器 ， 如 图 2-11 所 示 。 如 果 浏 览 器 没有 出 现 有 菜单 中 ， 选 择 【 选 择 程序 (C)...】 
选项 ， 在 计算 机 中 查找 浏览 器 程序 。 
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图 2-11 选择 不 同 浏览 器 打开 网 页 
2.4.3 ”查看 源 文件 
查看 网 页 源 代码 的 常见 方法 有 以 下 两 种 。 


@ 在 打开 的 页 面 空白 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【查看 源 文件 】〗 命 令 ， 如 图 2-12 
所 示 。 

@ 在 浏览 器 菜单 栏 上 选择 【查看 〗>【 源 文件 〗 莱 单 命 令 ， 可 以 查看 源 文件 ， 如 图 2-13 
所 示 。 
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图 2-12 选择 【查看 源 文 件 】 菜 单 命令 2-13 选择 【 源 文件 】 菜 单 命令 


区 由 于 浏览 器 的 规定 各 不 相同 , 有 些 浏 览 器 将 【查看 源 文件 】 命 名 为 【查看 源 代码 】， | 
请 读者 注意 ， 但 是 操作 方法 完全 相同 。 


人 


2.5 专家 解 惑 


1. 为 何 使 用 记事 本 编辑 的 HTML 文件 无 法 在 浏览 器 中 预览 ， 而 是 直接 在 记事 本 中 打开 ? 


答 : 很 多 初学 者 在 保存 文件 时 , 没有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 级 ， 
导致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 ， 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 单 击 右键 来 创建 
记事 本 文件 ， 在 给 文件 重 命名 时 ， 一 定 要 以 .html 或 .htm 作为 文件 的 后 级 。 特 别 要 注意 的 是 当 
Windows 系统 的 扩展 名 被 隐藏 时 ， 更 容易 出 现 这 样 的 错误 。 读 者 可 以 在 【文件 夹 选 项 】 对 话 
框 中 查看 是 否 显示 扩展 名 。 


2. 如 何 设置 Dreamweaver CS5.5 欢迎 屏幕 的 显示 与 隐藏 ? 


答 : Dreamweaver CS5.5 欢迎 屏幕 可 以 帮助 使 用 者 快速 进行 打开 文件 、 新 建文 件 和 相关 帮 
助 的 操作 。 如 果 读 者 不 希望 显示 该 窗口 ， 可 以 按 下 Ctrl+U 快捷 键 ， 在 弹出 的 窗口 中 ， 选 择 左 
侧 的 【常规 】 页 ， 将 右 侧 【文档 选项 】 部 分 的 【显示 欢迎 屏幕 】 色 选取 消 。 
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< 网 页 文本 与 段 洁 的 设计 


文本 是 网 页 中 最 主要 也 是 最 常用 的 元 素 。 本 章 主 要 介绍 如 何 向 网 页 中 添加 文本 , 并 设计 文 
本 段落 列表 的 相关 格式 ， 如 建立 无 序列 表 和 有 序列 表 、 设 置 段落 格式 的 显示 方式 等 。 


3.1 网 页 文本 的 特殊 样式 


在 文档 中 经 常 出 现 重 要 文本 ,这些 文本 将 进行 特殊 显示 ， 如 加 粗 显示 、 斜 体 显示 、 添 加 上 
标 或 下 标 等 。 


3.1.1 粗 体 显 示 


在 网 页 中 ,比较 重要 的 文本 通常 以 粗 体 方式 显示 。 使 用 HTML 的 <b> 标 记 可 以 设置 文本 的 
粗 体 显示 效果 。 
【 例 3.1】( 实 例文 件 : ch03\3.1.html) 


<html> 

<head> 

<title> 粗 体 显示 </title> 

</head> 

<body> 

<p> 清 明 时 节 雨 纷纷 </p> 
<p><b> 清 明 时 节 雨 纷纷 </b> </p> 
</body> 

</htm> 


在 下 9.0 中 的 预览 效果 如 图 3-1 所 示 ， 可 以 看 到 第 一 句 为 默认 显示 方式 ， 第 二 句 为 粗 体 显 
示 方 式 。 
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文件 虽 ” 沪 各 (Ej)。 豆 看 (V) ” 收 营 夫 (A) 工具 (D) 帮助 (H) 


清明 时 节 雨 纷纷 
清明 时 节 雨 纷纷 


图 3-1 粗 体 显示 预览 效果 
3.1.2 ”强调 显示 


使 用 <em> 标 签 可 以 强调 显示 文本 内 容 ， 在 浏览 器 中 的 表现 效果 就 是 把 这 段 文 字 以 斜体 方 
式 显示 。 
【 例 3.2】( 实 例文 件 ，ch03\3.2.html) 


<html> 
<head> 
<title> 粗 体 显示 </title> 
</head> 


<body> 

<p> 清 明 时 节 雨 纷纷 </p> 
<p><em> 清 明 时 节 雨 纷纷 </em> </p> 
</body> 

</html> 


在 下 9.0 中 预览 效果 如 图 3-2 所 示 ， 可 以 看 到 第 一 句 为 默认 显示 方式 ， 第 二 句 为 强调 显示 
方式 。 


CS 8 
| Ze ma BE a TR WO | 
清明 时 节 雨 纷纷 


立 有 9 了 芳 而 纾 及 


图 3-2 强调 显示 预览 效果 
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在 文本 中 加 入 强调 也 需要 有 技巧 。 如 果 强 调 太 多 ， 有 些 重要 的 短语 就 会 被 漏 掉 ; 
如 果 强 调 太 少 ， 就 无 法 真正 突出 重要 的 部 分 ， 这 与 调味 品 一 样 ， 最 好 还 是 不 要 小 
| 用 强调 。 另 外 ， 如 果 只 想 使 用 斜体 字 来 显示 文本 ， 请 使 用 <i> 标 签 。 


3.1.3 ”加 强调 显示 


<strong> 标 签 和 <em> 标 签 一 样 ,用 于 强调 文本 , 但 它 强 调 的 程度 更 强烈 一 些 。 浏 览 器 通常 
会 以 不 同 于 <em> 标 签 的 方式 来 显示 <strong> 标 签 中 的 内 容 , 通常 是 用 加 粗 的 字体 (相对 于 斜体 ) 
来 显示 其 中 的 内 容 ， 这 样 用 户 就 可 以 把 这 两 个 标签 区 分 开 来 了 。 

【 例 3.3】( 实 例文 件 : ch03\3.3.html) 


<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<p> 清 明 时 节 雨 纷纷 </p> 
<p><strong> 清 明 时 节 雨 纷纷 </strong></p> 
</body> 

</html> 


在 下 9.0 中 预览 效果 如 图 3-3 所 示 ， 可 以 看 到 第 一 句 为 默认 显示 方式 ， 第 二 句 为 加 强调 显 
示 方 式 。 
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3-3 ”加 强调 显示 预览 效果 
3.1.4 ”倾斜 文本 


HTML 中 的 < 这 标记 实现 了 文本 的 倾斜 显示 。 放 在 <i></ 放 之 间 的 文本 将 以 斜体 显示 。 
【 例 3.4】( 实 例文 件 ， ch03\3.4.html) 


<html> 
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<head> 
<title> 无 标题 文档 </title> 
</head> 


<body> 

<p> 路 上 行人 欲 断 魂 </p> 
<p><i> 路 上 行人 欲 断 瑰 </i></p> 
</body> 

</html> 


在 正 9.0 中 预览 效果 如 图 3-4 所 示 ， 其 中 <i><i> 之 间 的 文字 以 斜体 显示 。 


百 
豆 看 VM 收 茂 六) 工具 中 ” 
路 上 行人 欲 断 魂 
属 上 闻 人 就 疡 绒 
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文件 (FP) ” 编 强 (E) 


图 3-4 斜体 文本 预览 效果 


芋 到 HTML 中 的 重要 文本 和 倾斜 文本 标记 已 经 过 时 ,这些 标记 都 应 该 使 用 CSS 样式 来 
实现 ， 而 不 应 该 使 用 HTML 来 实现 。 随 着 后 面 学 习 的 深入 ， 读 者 会 逐渐 发 现 ， 即 

| 使 HTML 和 CSS 实现 了 相同 的 效果 ， 但 是 CSS 所 能 实现 的 控制 远 远 比 HIML 要 
细致 、 精 确 很 多 。 


3.1.5 上 标 和 下 标 文本 


在 HTML 中 用 <sup> 标 记 实 现 上 标 文 字 ， 用 <sub> 标 记 实 现下 标 文 字 。<sup> 和 <sub> 都 是 
双 标 记 ， 两 个 标记 之 间 的 文本 会 分 别 以 上 标 或 下 标 形式 出 现 。 
【 例 3.5】( 实 例文 件 : ch03\3.5.html) 


<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 
<!- 上 标 显示 --> 
<p>c=a<sup>2</sup>+b<sup>2</sup></p> 

<!- 下 标 显示 --> 
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<p>H<sub>2</sub>+O 一 H<sub>2</sub>O</p> 
</body> 
</html> 


在 正 9.0 中 预览 效果 如 图 3-5 所 示 ， 分 别 实现 了 了 上 标 和 下 标 文 本 显示 。 
| EE 
[< 向 已] 代码 \cho3\3.3.html PD ~ 


文件 (F) ”编辑 (E) ”前 看 (V) ”收藏 夫 ( ” 


| c=a2+b2 
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图 3-5 上 标 和 下 标 预 览 效果 


3.1.6 设置 文字 大 小 


在 HTML 中 ， 使 用 big 和 small 标签 可 以 定义 文字 的 大 小 。 其 中 ，<big> 标 签 呈现 大 号 字 


体 效果 ，<small> 标 签 呈 现 小 号 字体 效果 。 


【 例 3.6】 (实例 文件 : ch03\3.6.html) 


<html> 

<head> 

<title> 清 明 </title> 

</head> 

<body> 

<p> 清 明 时 节 雨 纷纷 </p> 
<p><big> 路 上 行人 欲 断 魂 </big></p> 
<p><small> 借 问 酒家 何 处 有 </small></p> 
<p> 牧 童 遥 指 杏 花村 </p> 

</body> 

</html> 


在 正 9.0 中 预览 效果 如 图 3-6 所 示 ， 分 别 实 现 字 体 放 大 与 缩小 的 显示 。 


E 莉 使 用 <big> 标 签 时 要 小 心 ， 因 为 浏览 器 总 是 试图 去 理解 各 种 标签 ， 对 于 那些 不 支持 


<big> 标 签 的 浏览 器 来 说 ， 它 经 常 将 其 认为 是 粗 体 字 标 签 。 另 外 ， 如 果 文 字 已 经 是 
最 大 号 字体 ，<big> 标 签 将 不 起 任何 作用 ; 而 如 果 字 体 已 经 是 最 小 号 ，<small> 标 
签 也 将 不 起 任何 作用 。 


网 页 文本 与 段落 的 设计 第 3 党 


(sme 


(CAD rser aninist p - ox | Es | 


文件 六 各 日 。 各 看 (V) 收 襄 失 (A) 工具 (T) 才 助 > 


清明 时 节 雨 纷纷 
路 上 行 欲 断 魂 
借 问 酒家 何 处 有 
牧童 禹 指 可 花村 


3-6 字体 放大 与 缩小 显示 效果 
3.1.7 ”定义 文字 的 方向 


在 网 页 中 ， 为 了 吸引 浏览 者 的 眼球 ， 有 时 会 使 文字 从 右 向 左 显示 ， 这 就 需要 HTML 的 
<bdo> 标 签 ， 不 过 ，<bdo> 标 签 需要 与 属性 dir 一 起 使 用 。 其 中 ， 属 性 值 “rtl” 表 示 文 字 从 右 向 
左 显示 ，“ltr” 表 示 从 左 向 右 显示 。 

【 例 3.7】( 实 例文 件 : ch03\3.7.html) 


<html> 

<body> 

<p> 春 眠 不 觉 晓 </p> 

<bdo dir="rtl"> 春 眠 不 觉 晓 </bdo> 
<p><bdo dir="ltr"> 春 眠 不 觉 晓 </bdo></p> 
</body> 

</html> 


在 正 9.0 中 预览 效果 如 图 3-7 所 示 , 在 图 中 可 以 看 到 第 一 句 是 正常 显示 ， 第 二 句 是 换 方向 
显示 ， 第 三 句 是 使 用 属性 值 “ltr” 设 置 的 效果 ， 与 第 一 句 显示 效果 一 样 。 
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图 3-7 文字 方向 预览 效果 
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3.1.8 设置 文字 的 字体 、 大 小 与 颜色 


有 了 时， 需要 对 网 页 中 的 文字 进行 字体 样式 、 大 小 、 颜 色 等 属性 的 设置 。 在 HTML 中 ， 可 
以 使 用 <font> 标 签 来 设置 文字 大 小 、 颜 色 等 样式 。 
【 例 3.8】 (实例 文件 :ch03\3.8.html) 


<html> 
<head> 
<title>《 清 明 》</title> 
</head> 
<body> 
《清明 》 
<p> 清 明 时 节 雨 纷纷 </p> 
<p><font size="5" face="arial" color="red"> 路 上 行人 欲 断 魂 </font> </p> 
<p><font size="6" face="verdana" color="green"> 借 问 酒家 何 处 有 </font> </p> 
<p><font size="7" face="Webdings" color="blue"> 牧 童 遥 指 杏 花 村 </font> </p> 
</body> 
</html> 


在 正 9.0 中 预览 效果 如 图 3-8 所 示 ， 从 图 中 可 以 看 到 设置 文字 颜色 、 大 小 后 的 效果 。 


国 HAuserswdminit PD - © Xx | @ (8) 
文件 (F) ” 蝙 强 (E) ”查看 (V) 收藏 实 (A) 工具 (T) ”帮助 (H) 


《清明 >》 

清明 时 节 十 纷纷 

路 上 行人 欲 断 魂 

借 问 酒家 何 处 有 


牧童 遥 指 杏 花 村 


3-8 文字 样式 的 预览 效果 


在 HTML 中 ， 不 赞成 使 用 font 元 素 。 如 果 需 要 设置 文字 的 字体 、 颜 色 和 大 小 ， 请 
使 用 CSS 样式 。 


3.2 网 页 文本 排版 


在 网 页 中 如 果 要 把 文字 合理 地 显示 出 来 , 离 不 开 段 落 标记 。 对 网 页 中 的 文字 段落 进行 排版 
时 ， 并 不 像 文 本 编辑 软件 Word 那样 可 以 定义 许多 模式 来 安排 文字 的 位 置 。 在 网 页 中 要 将 某 一 


*28。 


网 页 文本 与 段落 的 设计 第 3 党 


段 文 字 放 在 特定 的 地 方 是 通过 HTML 标记 来 完成 的 。 
3.2.1 换行 标记 <br> 


使 用 换行 标记 <br> 可 以 给 一 段 文字 换行 ， 该 标记 是 一 个 单 标记 ， 它 没有 结束 标记 ， 是 英 
文 单词 “break” 的 缩写 ,， 其 作用 是 将 文字 在 一 段 内 强制 换行 。 一 个 <br/> 标 记 代表 一 个 换行 符 ， 
连续 的 多 个 标记 可 以 实现 多 次 换行 。 使 用 换行 标记 时 ， 在 需要 换行 的 位 置 添加 <br/> 标 记 即 可 。 
例如 ， 下 面 的 代码 实现 了 对 文本 的 强制 换行 。 

【 例 3.9】( 实 例文 件 : ch03\3.9.html) 


<html> 

<head> 

<title> 文 本 段 换行 </title> 

</head> 

<body> 

本 节目 标 <br /> 

网 页 中 的 文字 是 如 何 设置 的 <br/> 

如 何在 Dreamweaver 中 处 理 文字 <br/> 
如 何 对 文本 进行 格式 化 《CSS) <br/> 
熟悉 使 用 Dreamweaver 进行 样式 表 的 创建 与 应 用 
</body> 

</html> 


虽然 在 HTML 源 代码 中 ， 增 加 <br> 标 记 后， 在 正 9.0 中 预览 效果 如 图 3-9 所 示 ， 实 现 了 
换行 效果 。 


司 代 到 ch03\3.4html P - C x|‖ 要 及 本 | 
文件 (月 编 绢 (5) ”查看 V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


本 节目 标 

网 页 中 的 文字 是 如 何 设置 的 

如 何在 Dreamweaver 中 处 理 文字 

如 何 对 文本 进行 格式 化 《CSS) 

熟悉 使 用 Dreamweaver 进 行 样式 表 的 创建 与 应 用 


图 3-9 换行 标记 的 使 用 
3.2.2 ”段落 标记 <p> 

段落 标记 <p> 用 来 定义 网 页 中 的 一 段 文本 ， 文 本 在 一 个 段落 中 会 自动 换行 。 段 落 标记 是 双 
标记 ， 即 <p></p>， 在 <p> 开 始 标记 和 </p> 结 束 标记 之 间 的 内 容 形成 一 个 段落 。 如 果 省 略 结束 


标记 ， 从 <p> 标 记 开 始 ， 直 到 遇见 下 一 个 段落 标记 之 前 的 文本 ， 都 在 一 段 段 落 内 。 段 落 标记 中 
的 p 是 英文 单词 “paragraph” 的 首 字母 。 
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【 例 3.10】( 实 例文 件 : ch03\3.10.html) 


<html> 

<head> 

<title> 段 落 标 记 的 使 用 </title> 

</head> 

<body> 

<p>HTML、CSS 应 用 教程 之 跟 DIV 说 Bey!Bey!</p> 

<p>Web 设计 师 可 以 使 用 HTML4 和 CSS2.1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈旧 的 基于 table 
布局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰富 的 网 站 。 我 们 可 以 在 不 使 用 内 联 <font> 和 <br> 标 签 的 基础 上 对 
网 站 添加 漂亮 而 细腻 的 风格 样式 。 事 实 上 ， 我 们 目前 的 设计 能 力 已 经 让 我 们 远离 了 那个 可 怕 的 浏览 器 战争 时 
代 、 专 有 协议 和 那些 充满 内 动 、 滚 动 和 闪烁 的 丑陋 网 页 。 

<p> 

> 

虽然 我 们 现在 已 经 普遍 使 用 了 HTML4 和 CSS2.1， 但 是 我 们 还 可 以 做 得 更 好 ! 我 们 可 以 重组 我 们 代码 的 
结构 并 能 让 我 们 的 页 面 代码 更 富有 语义 化 特性 。 我 们 可 以 缩减 带 给 页 面 美丽 外 观 样式 代码 量 并 让 他 们 有 更 高 
的 可 扩展 性 。 现 在 ，HTML 和 CSS 正 跃 跃 欲 试 的 等 待 大 家 ， 下 面 让 我 们 来 看 看 他 们 是 否 真 的 能 让 我 们 的 设计 
提升 到 下 一 个 高 度 吧 … 

<p> 

<p> 

曾经 ， 设 计 师 们 经 常会 跟 频 繁 使 用 基于 table 的 没有 任何 语义 的 布局 。 不 过 最 终 还 是 要 感谢 像 Jeffrey 
Zeldman 和 Eric Meyer 这 样 的 思想 革新 者 ， 聪 明 的 设计 师 们 慢 慢 的 接受 了 相对 更 语义 化 的 <div> 布 局 蔡 代 了 
table 布局 ， 并 且 开 始 调用 外 部 样式 表 。 但 不 幸 的 是 ， 复 杂 的 网 页 设计 需要 大 量 不 同 的 标签 结构 代码 ， 我 们 把 
它 叫做 “<div>-soup” 综合 症 。 

</p> 

</body> 

</html> 


在 正 9.0 中 预览 效果 如 图 3-10 所 示 ，<p> 标 记 将 文本 分 成 4 个 段落 。 
[56 sop\ 洒 代 矶 whO3\3.5 htn| -CX | 后 RS 人 用 "| 


ETE 
HTIL 、 CSS 应 用 教程 之 累 DIV 说 Bey!Bey' 


Web 设 计 师 可 以 使 用 HTIL4 和 CSS2.1 充 成 一 些 根 酷 的 东西 。 我 们 可 以 在 不 使 用 陈旧 的 基 
于 table 布 局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰 富 的 网 站 。 我 们 可 以 在 不 使 用 


内 隘 和 ， 
标签 的 基础 上 对 网 站 添加 漂亮 而 细腻 的 风格 样式 。 事 立 上 ， 我们 目前 的 设计 能 力 已 经 
3 个 可 怕 的 浏览 器 战争 时 代 、 专 有 协议 和 那些 充满 由 动 、 缚 动 和 站 糙 的 


人 1， 便 是 我 们 还 可 以 伏 得 更 好 ! 我 们 可 以 
重组 我 们 代码 的 结构 并 能 让 我 们 | -人 人 pi 
面 美丽 外 观 样式 代码 重 并 让 他 们 有 更 高 的 可 扩展 性 。 现 在 SS 正 跃 跃 谷 

的 等 待 大 家 ， 下 i Ep 


曾经 ， 计生 DC 休 全 全 的 这 信用 基 开交 和 的 全 攻 条 个 天 X 的 区 不 过 最 终 还 是 
要 感谢 像 Jef leyer 这 样 的 思想 革新 者 ， 聪 明 的 设计 师 们 慢 慢 的 
接受 了 相对 更 i 人 


布局 曾 代 了 table 布 局 ， 并 且 开始 调用 外 部 样式 表 。 但 不 幸 的 是 ， 复 杂 的 网 页 设计 需 
要 大 | 9 我 们 把 马 叫 做 
up ” 综合 


图 3-10 段落 标记 的 使 用 
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3.2.3 ”网 页 标题 标记 <h1>~<h6> 


在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 出 现 之 外 ， 还 可 以 作为 标题 存在 。 通 常 一 篇 
文档 最 基本 的 结构 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 
HTML 文档 中 包含 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 由 <hl>~<h6> 元 素来 定义 ， 
<hl>~<h6> 标 题 标记 中 的 字母 h 是 英文 headline (标题 行 ) 的 简称 。 其 中 <h1> 代 表 1 级 标题 ， 
级 别 最 高 ， 字 体 也 最 大 ， 其 他 标题 元 素 依次 递 碱 ，<h6> 级 别 最 低 。 


国 作为 标题 ， 它 们 的 重要 性 是 有 区 别 的 ， 其 中 <h1> 标 题 的 重要 性 最 高 ， 


【 例 3.11】( 实 例文 件 : ch03\3.11.html) 


<html> 
<head> 
<title> 文 本 段 换行 </title> 
</head> 

<body> 

<h1> 这 里 是 1 级 标题 </h1> 
<h2> 这 里 是 2 级 标题 </h2> 
<h3> 这 里 是 3 级 标题 </h3> 
<h4> 这 里 是 4 级 标题 </h4> 
<h5> 这 里 是 5 级 标题 </h5> 
<h6> 这 里 是 6 级 标题 </h6> 
</body> 

</html> 


在 焉 9.0 中 预览 效果 如 图 3-11 所 示 。 


站 ft 二 \ch03\3.6html 人 ”CX 感 文本 息 搞 行 


文件 () 篇 句 (E) ”查看 (V】 ”收藏 交 (A) 工具 (T) 帮助 (H) 
这 里 是 1 级 标题 

这 里 是 2 级 标题 

这 里 是 3 级 标题 

这 里 是 4 级 标题 


这 里 是 级 标题 


| 
这 里 是 6 级 标题 


图 3-11 标题 标记 的 使 用 


最 低 。 


<h6> 重 要 性 | 
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3.2.4 文本 水 平 居 中 标记 <center> 


使 用 <center> 标 签 ， 可 以 将 其 所 包括 的 文本 进行 水 平 居 中 。Center 标签 是 成 对 出 现 的 ， 以 
<center> 开 始 ，</center> 结 束 。 


【 例 3.12】( 实 例文 件 : ch03\3.12.html) 


<html> 

<head> 

<title> 文 本 水 平 居 中 </title> 
</head> 

<body> 

清明 时 节 雨 纷纷 

<center> 清 明 时 节 雨 纷纷 </center> 


</body> 
</html> 


在 正 9.0 中 预览 效果 如 图 3-12 所 示 。 


全 SG 司 HAUserswdminist D =- OX &| 


文件 (F) ” 编 强 (E) ”查看 (V) 收藏 突 (A) 工具 (T) ” 


清明 时 节 雨 纷纷 
清明 时 节 雨 纷纷 


3-12 文本 水 平 居中 标记 的 使 用 


国 在 HTML 中 ， 不 赞成 使 用 center 元 素 。 而 且 在 HTML 中 该 标记 已 经 被 停 用 ， 当 需 | 
t 要 将 文字 进行 水 平 居中 显示 时 ， 请 使 用 CSS 样式 来 居中 文本 。 


3.2.5 标尺 标记 <hr> 


在 网 页 文本 排版 的 过 程 中 , 如果 在 文本 中 添加 标尺 , 可 以 让 文本 有 条 理 地 显示 , 尤其 是 当 
文本 段落 比较 长 时 。 


【 例 3.13】( 实 例文 件 ，ch03\3.13.html) 


<html> 


<body> 
<p> 定 义 水 平 线 </p> 
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<hr> 
<p> 床 前 明月 光 ， 疑 是 地 上 霜 。</p> 
<hr/> 

<p> 举 头 望 明月 ， 低 头 思 故 乡 。</p> 
</body> 

</html> 


在 正 9.0 中 预览 效果 如 图 3-13 所 示 。 


本 eel >| 
P 
”Ee I® ©] Hi\Users\Administ PD - © X | @ Hi\Users\ 
文件 (F) ” 妨 辑 (E) ”前 看 (V) ” 收 草 突 (A) 工具 (TD) ”帮助 (H) 


定义 水 平 线 


床 前 明月 光 ， 疑 是 地 上 霜 。 


举 头 望 明月 ， 低 头 思 故 乡 。 


图 3-13 标尺 标记 的 作用 
3.3 ”网 页 文字 列表 的 设计 


文字 列表 可 以 有 序 地 编排 一 些 信息 ,使 其 结构 化 和 条 理化 ,并 以 列表 的 样式 显示 出 来 ， 以 
便 浏 览 者 能 更 加 快捷 地 获得 相应 信息 。 HTML 中 的 文字 列表 类 似 于 文字 编辑 软件 Word 中 的 项 
目 符号 和 自动 编号 。 


3.3.1 建立 无 序列 表 


无 序列 表 相当 于 Word 中 的 项 目 符号 , 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 项 
标识 。 无 序列 表 使 用 <ul></ul> 标 记 ， 其 中 每 一 个 列表 项 使 用 <li></li> 标 记 ， 其 结构 如 下 所 示 。 


<u> 
<l 记 无 序列 表 项 </li> 
<l 记 无 序列 表 项 </li> 
<l 记 无 序列 表 项 </li> 
<l 记 无 序列 表 项 </li> 
</ul> 


在 无 序列 表 结构 中 ， 使 用 <ul></ul> 标 记 表 示 这 个 无 序列 表 的 开始 和 结束 ，<li> 则 表示 一 个 
列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 可 以 省 略 结束 标记 。 下 面 的 
实例 使 用 无 序列 表 实 现 文本 的 显示 。 


【 例 3.14】 (实例 文件 :ch03\3.14.html) 


在 下 9.0 中 预览 效果 如 图 3-14 所 示 。 读 者 会 发 现 ， 无 序列 表 项 中 可 以 嵌 套 一 个 列表 。 如 
代码 中 的 “系统 分 析 ” 列 表 项 和 “ 伪 网 页 草图 ”列表 项 中 都 有 下 级 列表 ， 因 此 在 这 对 <li></li> 
标记 之 间 又 增加 了 一 对 <ul></ul> 标 记 。 
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3.3.2 ”建立 有 序列 表 


| 司 cusersyingdav P - Ox | SB 天。 
文 半 由 妨 六 (二 看 WV) 家 太夫 A) 工具 (和 RH) 


网 站 建设 流程 


多 
* 制作 网 页 草图 
。 将 草图 转换 为 网 页 
,站 点 建设 
. 网页 布局 
“网 站 测试 
站 点 的 发 布 与 站 点 管理 


图 3-14 无 序列 表 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 , 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 基 
本 相同 ， 它 使 用 标记 <ol></ol>， 每 一 个 列表 项 前 使 用 <li></i>。 每 个 项 目 都 有 前 后 顺序 之 分 


多 数 用 数字 表示 ， 其 结构 如 下 。 


<ol> 
<li> 第 1 项 </i> 
<li> 第 2 项 </li> 
<li> 第 3 项 </li> 
</ol> 


下 面 的 实例 使 用 有 序列 表 实 现 文本 的 排列 显示 。 
【 例 3.15】 “实例 文件 :ch03\3.15.html) 


<html> 
<head> 


<title> 有 序列 表 的 使 用 </title> 


</head> 
<body> 


<h1> 本 讲 目 标 </h1l> 


<ol> 


<1i> 网 页 的 相关 概念 </li> 

<li> 网 页 与 HIML</li> 

<li> Web 标准 结构、 表现 、 行 为 )</li> 
<li> 网 页 设计 与 开发 的 过 程 </li> 

< 这 与 设计 相关 的 技术 因素 </li> 


<li>HTML 简介 </l> 
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</ol> 
</body> 
</html> 


在 正 9.0 中 预览 效果 如 图 3-15 所 示 。 用 户 可 以 看 到 新 添加 的 有 序列 表 。 
eT 


SS 国 CAUsersyingda\c PD - © X | @ 有 FFI 
文件 (久久 (E) ”查看 (V) 收 意 夫 (A) 工具 (T) 孝 动 (H) 

。 网 页 的 相关 概念 
网 页 与 Hi _ 

.Web 标准 结构、 表现 、 行 为 ) 

。 网 页 设计 与 开发 的 过 程 


.与 设计 相关 的 技术 因素 
.HT 了 LL 简介 


EC 


图 3-15 有 序列 表 的 效果 
3.3.3 ”建立 不 同类 型 的 无 序列 表 


通过 使 用 多 个 <ul> 标 签 ， 可 以 建立 不 同类 型 的 无 序列 表 。 
【 例 3.16】〔 实 例文 件 ，ch03\3.16.html) 


<html> 
<body> 
<h4>Disc 项 目 符号 列表 : </h4> 
<ul type="disc"> 
<l 记 苹果 </li> 
<li> 香 蕉 </i> 
<l 这 柠檬 </li> 
<l 谊 村子 </li> 
</ul> 
<h4>Circle 项 目 符号 列表 : </h4> 
<ul type="circle"> 
<l 记 苹果 </li> 
< 这 香 藻 </li> 
<I 记 柠 榜 </li> 
<I 记 桔子 </1li> 
</ul> 
<h4>Square 项 目 符号 列表 : </h4> 


在 耻 9.0 中 预览 效果 如 图 3-16 所 示 。 


图 3-16 不 同类 型 的 无 序列 表 
3.3.4 ”建立 不 同类 型 的 有 序列 表 


通过 使 用 多 个 <ol> 标 签 ， 可 以 建立 不 同类 型 的 有 序列 表 。 
【 例 3.17】《〔 实 例文 件 ，ch033.17.html) 


在 下 9.0 中 预览 效果 如 图 3-17 所 示 。 


图 3-17 不 同类 型 的 有 序列 表 
3.3.5 ” 藤 套 列表 


嵌 套 列表 是 网 页 中 常用 的 元 素 ， 使 用 <ul> 标 签 可 以 制作 网 页 中 的 嵌 套 列表 。 
【 例 3.18】〔 实 例文 件 ，ch03\3.18.html) 


在 下 9.0 中 预览 效果 如 图 3-18 所 示 。 


en J Ee 


图 3-18 婴 套 列表 
3.3.6 自 定义 列表 


在 HIML 中 还 可 以 自 定义 列表 。 自 定义 列表 的 标签 是 <dl>。 
【 例 3.19】 《实例 文件 : ch03\3.19.html) 


在 下 9.0 中 预览 效果 如 图 3-19 所 示 。 
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一 个 定义 列表 : 


电脑 
_ .是 一 种 能 够 按照 程序 运行 的 电子 设备 ……. 
示 
以 视觉 方式 显示 信息 的 装置 


图 3-19” 自 定义 列表 


3.4 设置 网 页 文本 段落 格式 


段落 〈Paragraph) 标记 把 文本 格式 化 成 普通 段落 。 段 落 <p> 标 记 的 一 个 基本 属性 是 align 
(对 齐 ) ， 可 以 有 left ( 左 ) 、center〈 中 间 ) 、right 〈 右 ) 几 个 值 ， 默 认 值 是 left。 


3.4.1 段落 左 对 齐 


段落 左 对 齐 是 段落 的 默认 对 齐 方式 ， 使 用 段落 标记 的 属性 align 可 以 设置 左 对 齐 方式 。 
【 例 3.20】 《实例 文件 ，ch03\3.20.html) 


<html> 
<head> 
<title> 左 对 齐 段落 </title> 
</head> 
<body> 
朝 辞 白 帝 彩云 间 ， 千 里 江陵 一 日 还 。 
<p align="left"> 两 岸 猿 声 啼 不 住 ， 轻 舟 已 过 万 重山 。 


</body> 
</html> 


在 正 9.0 中 预览 效果 如 图 3-20 所 示 。 


[a ruser dninist Pp - ox Ensgs| 
| 文 八大 日， 下 得 Mt 内 工 RID WE 。| 


彰 苦 白 市 彩云 间 ， 千 里 江陵 一 日 还 。 中， 
两 岸 猿 声 啼 不 住 ， 轻 髓 已 过 万 重山 。 


3-20 左 对 齐 
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3.4.2 ”段落 居中 对 齐 


使 用 段落 标记 的 align 属性 可 以 设置 段落 的 居中 对 齐 方 式 。 
【 例 3.21】 《实例 文件 ,ch03\3.21.html) 


<html> 
<head> 
<title> 居 中 对 齐 段落 </title> 
</head> 
<body> 
朝 辞 白 帝 彩云 间 ， 千 里 江陵 一 日 还 。 
<p align="center"> 两 岸 猿 声 啼 不 住 ， 轻 舟 已 过 万 重山 。 


</body> 
</html> 


在 正 9.0 中 预览 效果 如 图 3-21 所 示 。 


公信 居 Hi\UsersAdminist PD - OX 


文件 (有 ” 妨 强 (E) 得 看 (V) 收藏 闪 ( 和 A) IRM [CT 
朝 套 白 帝 彩 云 间 ， 千 里 江陵 一 日 还 。 
两 岸 儿 声 啼 不 住 ， 轻 舟 已 过 万 重山 。 


图 3-21 居中 对 齐 
3.4.3 ”段落 右 对 齐 


使 用 段落 标记 的 align 属性 可 以 设置 段落 的 右 对齐 方 式 。 
【 例 3.22】 (实例 文件 :ch03\3.22.html) 


<html> 

<head> 

<title> 居 中 对 齐 段 落 </title> 
</head> 
<body> 
朝 辞 白 帝 彩云 间 ， 千 里 江陵 一 日 还 。 

<p align="right"> 两 岸 猿 声 啼 不 住 ， 轻 舟 已 过 万 重山 。 
</body> 
</html> 
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在 正 9.0 中 预览 效果 如 图 3-22 所 示 。 


(3 关 HAUsersAdminist DD ”0 X | 夺 天 二 对齐 良 演 


文件 (有 ”名 志 [E) 豆 要 改天 闪 (A) 工具 [者 二 (H) 
朝 辞 白 帝 彩云 间 ， 千 里 江陵 一 日 还 。 
两 岸 名 声 暗 不 住 ， 轻 舟 已 过 万 重山 。 


图 3-22 右 对 齐 


3.5 综合 实战 一 一 成 才 教育 网 文本 设计 


本 章 讲述 了 网 页 组 成 元 素 中 最 常用 的 文本 。 本 实例 将 综合 运用 网 页 文本 的 设计 方法 , 制作 
成 才 教育 网 的 文本 页 面 。 具 体操 作 步 又 如 下 。 


to 出 新 建 HTML 文档 ， 代 码 如 下 。 


<html > 

<head> 

<meta charset="utf-8" /> 
<title> 成 才 教 育 网 </title> 
</head> 

<body> 

</body> 

</html> 


02 在 body 部 分 增加 如 下 HTML 代码 。 保 存 页 面 。 


<p><h2> 成 才 教 育 </h2></p> 
<p> 成 才 教 育成 立 于 2003 年 ， 是 一 家 专业 致力 于 学 生 学 习 能 力 开发 和 培养 、 学 习 社 区 建设 、 课 外 辅导 
服务 、 家 庭 教育 研究 的 新 型 综合 教育 服务 机 构 。 自 成 立 起 ， 一 直 专业 致力 于 初 高 中 学 生 的 课外 辅导 和 学 习 能 
力 的 培养 。</p> 
<h3> 教 学 模式 </h3> 
<p> 为 学 生 量 身 定制 最 佳 的 学 习 方 案 ， 改 善 学 习 方 法 ， 充 分 挖 气 学 生 们 的 智力 潜能 ， 激 发 学 习 兴趣 ， 培 
养 学 生 的 自学 能 力 ， 辅 导 老师 以 一 线 重点 在 校 教师 为 主 ) 对 学 生 设计 适合 学 生 的 辅导 教案 与 作业 习题 </p> 
<h3> 教 学 特色 </h3> 
分 析 学 科 不 足 制定 辅导 计划 ; <br /> 
特级 名 师 高 考 难点 点 睛 ; <br /> 
专人 陪读 随时 解除 疑难 ，<br /> 
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专业 学 科 导师 一 对 一 面授 学 科 知识 、 解 题 技巧 、 学 习 方 式 。 
03) 使 用 下 9.0 打开 文件 ， 预 览 效 果 如 图 3-23 所 示 。 


Eee 


CD uraninin Pp - ox Cy 


成 才 教 育 
和 是 一 家 专业 致力 于 学 生 学 习 能 力 开发 和 培 
学 习 社 区 建设 、 课 外 辅导 服务 、 家 庭 教育 研究 的 新 型 综合 教育 
sh 息 记 起 ， 一 直 专 业 致力 于 初 高 中 学 生 的 课外 辅导 和 学 
习 能 力 的 培养 
教学 模式 
证人 放生 二 二 力 襟 ， 交 册 3 人 法 充分 挖 气 学 生 们 
的 智力 潜能 ， 激 发 学 习 兴趣 ， 培 养 学 生 的 辅导 老师 (以 
一 线 重点 在 校 教师 为 主 ) 和 学 生计 二 条 生 人 入 杂 二 性 
教学 特色 
人 浙 儿 开工 是 币 证 畏 富 计 划 ， 
特级 名 师 高 考 难 点 点 汪 
le 
业 学 科 导师 一 对 一 | 面 关 学 科 知 识 . 解 题 技巧 、 学 习 方式 。 


图 3-23 ” 正 9.0 浏览 效果 


3.6 ”专家 解 惑 


1. 换行 标记 和 段落 标记 的 区 别 是 什么 ? 

答 : 换行 标记 是 单 标记 ， 不 能 写 结束 标记 。 段 落 标记 是 双 标记 ， 可 以 省 略 结束 标记 也 可 以 
不 省 略 。 默 认 情 况 下 ， 段 落 之 间 的 距离 和 段落 内 部 的 行 间距 是 不 同 的 ， 段 落 间 距 比 较 大 ， 行 间 
距 比 较 小 。HTML 无 法 调整 段落 间距 和 行 间 距 ， 如 果 和 希望 调整 它们 ， 就 必须 使 用 CSS。 在 
Dreamweaver CS5.5 的 设计 视图 下 , 按 下 回 车 (Enter) 键 可 以 快速 换 段 , 按 下 Shift+ 回 车 (Enter) 
键 可 以 快速 换行 。 

2. 无 序列 表 <ul> 元 素 的 作用 有 哪些? 

答 : 无 序列 表 元 素 主要 用 于 条 理化 和 结构 化 文本 信息 。 在 实际 开发 中 , 无 序列 表 在 制作 导 
航 菜单 时 使 用 广泛 。 导 航 菜单 的 结构 一 般 都 使 用 无 序列 表 实现 。 


第 4 章 
< 网 页 色彩 和 图 片 的 设计 > 


色彩 与 图 片 在 网 站 设计 中 占据 着 相当 重要 的 地 位 , 无 论 是 静态 网 页 还 是 动态 网 页 , 色彩 与 
图 片 永远 是 最 重要 的 一 环 。 当 距离 显示 屏 较 远 的 时 候 , 我 们 看 到 的 不 是 优美 的 版 式 , 而 是 美丽 
的 图 片 与 网 页 的 色彩 


4.1 网 页 色彩 的 应 用 


在 任何 一 个 设计 中 ， 色 彩 对 视觉 的 刺激 都 起 到 信息 传达 的 首要 作用 。 网 页 中 的 色彩 设 

计 是 最 直接 的 视觉 效果 ， 不 同 的 颜色 运用 会 给 人 以 不 同 的 感受 ， 高 明 的 设计 师 会 运用 颜色 
玉 交 砚 问 由 的 理 筷 向 在 中 质 。 为 了 能 更 好 地 应 用 色彩 来 设计 网 页 ， 下 面 先 来 了 解 一 下 色 
彩 的 基础 知识 。 

自然 界 中 的 色彩 五 颜 六 色 、 千 变 万 化 ， 比 如 玫瑰 是 红色 的 、 大 海 是 蓝 色 的 、 橘 子 是 杰 色 

… 但 是 最 基本 的 色彩 只 有 3 种 〈 红 、 黄 、 蓝 ) ， 其 他 的 色彩 都 可 以 由 这 3 种 调和 而 成 ， 我 
们 称 这 3 种 色彩 为 “三 原色 ”， 如 图 4-1 所 示 。 

I -可 以 看 到 ， 它 包括 红 、 橙 、 黄 、 绿 、 青 、 蓝 、 
紫 7 种 颜色 ， 各 颜色 间 自 然 过 渡 ， 其 中 红 、 黄 、 蓝 是 三 原色 ， 通 过 将 三 原色 以 不 同比 例 混合 可 
以 得 到 各 种 颜色 ， 如 图 4-2 所 示 。 


图 4-1 三 原色 图 4-2 颜色 色 块 


现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩色 两 种 ， 其 中 黑 、 白 、 灰 属于 非 彩色 系列 ， 其 他 的 
色彩 都 属于 彩色 系列 。 任 何 一 种 彩色 都 具备 3 个 特征 : 色相 、 明 度 和 饱和 度 ， 而 非 彩色 只 有 明 
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色彩 区 别 于 另 一 种 色彩 的 最 主要 因素 ， 比 如 紫色 、 绿 色 、 黄 色 等 都 代表 了 不 同 的 


度 属性 
县 却 | 色相 指 的 是 色彩 的 名 称 ， 这 是 色彩 最 基本 的 特征 ， 反 映 颜色 的 基本 面貌 ， 是 一 种 
[ 色相 。 


同一 色相 的 色彩 调整 一 下 亮度 或 纯度 很 容易 搭配 ， 比 如 深 绿 、 上 暗 绿 、 草 绿 、 亮 绿 。 


茵 明度 也 叫 亮 度 ， 指 的 是 色彩 的 明暗 程度 ， 明 度 越 大 ， 色 彩 越 亮 。 | 


比如 一 些 购物 、 儿 童 类 网 站 用 的 是 一 些 鲜亮 的 颜色 ， 让 人 感觉 绚丽 多 姿 、 生 气 勃 勃 ， 明 度 
越 低 ， 颜 色 越 暗 , 如 图 4-3 所 示 。 较 暗 的 明度 主要 用 于 一 些 游戏 类 网 站 , 可 使 网 站 充满 神秘 感 ， 
如 图 4-4 所 示 。 


2 | 
p 
者 立即 的 草 


图 4-3 儿童 类 网 站 图 4-4 游戏 类 网 站 


开 吧 游戏 


图 饱和 度 也 叫 纯度 ， 指 色彩 的 鲜艳 程度 。 饱 和 度 高 的 色彩 纯 、 鲜 亮 ， 饱 和 度 低 的 色 
彩 暗淡 ， 含 灰色 。 


非 彩色 只 有 明度 属性 , 没有 色相 和 饱和 度 属 性 。 制作 网 页 时 使 用 彩色 还 是 非 彩 色 好 呢 ? 专 
业 的 研究 机 构 表明 : 彩色 的 记忆 效果 是 黑白 的 3.5 倍 。 也 就 是 说 ， 在 一 般 情况 下 ， 彩 色 页 面 较 
完全 黑白 页 面 更 加 吸引 人 。 进 行 网 页 制作 时 , 通常 是 将 主要 内 容 (如 文字 ) 用 非 彩色 (黑色 )， 
边框 、 背 景 、 图 片 用 彩色 。 这 样 页 面 整 体 不 单调 ， 显 得 和 谐 统 一 。 


4.2 在 网 页 中 插入 图 像 


图 像 可 以 美化 网 页 ， 插 入 图 像 使 用 单 标记 <img>。img 标记 的 属性 及 描述 如 表 4-1 所 
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表 4-1 img 标记 的 属性 


属性 值 描述 

alt text 定义 有 关 图 形 的 短 的 描述 

STC URL 要 显示 的 图 像 的 URL 

height pixels % 定义 图 像 的 高 度 

ismap URL 把 图 像 定 义 为 服务 器 端的 图 像 映射 

usemap URL 定义 作为 客户 端 图 像 映射 的 一 幅 图 像 。 请 参阅 <map> 和 <area> 标 
签 ， 了 解 其 工作 原理 

vspace pixels 定义 图 像 项 部 和 底部 的 空白 。 不 支持 。 请 使 用 CSS 代替 

width pixels % 设置 图 像 的 宽度 


1. 插入 图 像 
src 属性 用 于 指定 图 片 源 文 件 的 路 径 ， 它 是 img 标记 必 不 可 少 的 属性 。 其 语法 格式 如 下 。 
<img src=" 图 片 路 径 "> 


图 片 的 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 下 面 的 实例 是 在 网 页 中 插入 图 片 。 
【 例 4.1】 (实例 文件 :ch04\4.1.html) 


<html> 

<head> 

<title> 插 入 图 片 </title> 

</head> 

<body> 

<img src="images/meishi.ipg"> 
</body> 

</html> 


在 正 9.0 中 预览 效果 如 图 4-5 所 示 。 


CE 


Ec 疆 注 中 二 看 V) 


改 重 闪 内 工具 (站 才 动 IH) 


4-5 插入 图 片 
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2. 从 不 同位 置 插入 图 像 


在 插入 图 片 时 ， 用 户 可 以 将 其 他 文件 夹 或 服务 器 中 的 图 片 显示 到 网 页 中 。 
【 例 4.2】 实例 文件 :ch04\4.2.html) 


<html> 

<body> 

<p> 

来 自 一 个 文件 夹 的 图 像 : 

<img src="images/meishi.jpg" /> 
</p> 

< 

来 自 baidu 的 图 像 : 

<img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" /> 
</p> 

</body> 

</html> 


在 焉 9.0 中 预览 效果 如 图 4-6 所 示 。 


图 4-6 插入 其 他 文件 夹 或 服务 器 的 图 片 
4.2.1 设置 图 像 在 网 页 中 的 宽度 和 高 度 
在 HTML 文档 中 ， 还 可 以 设置 插入 图 片 的 显示 大 小 ， 一 般 是 按 原始 尺寸 显示 ， 但 也 可 以 


设置 显示 尺寸 。 设 置 图 像 尺 寸 时 要 使 用 属性 width〈 宽 度 ) 和 height (高度) 。 
【 例 4.3】 《实例 文件 : ch04\4.3.html) 


<html> 

<head> 

<title> 插 入 图 片 </title> 
</head> 
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<body> 
<img src="images/meishi.jpg"> 

<img src="images/meishi.jpg" width="200"> 

<img src—"images/meishi.jpg" width="200" height="300"> 
</body> 

</html 


在 正 9.0 中 预览 效果 ， 如 图 4-7 所 示 。 
DD emareon 
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图 4-7 设置 图 片 的 宽度 和 高 度 


由 图 4-7 可 以 看 到 ， 图 片 的 显示 尺寸 由 width 宽度) 和 height (高度) 控制 。 当 只 为 图 
片 设置 一 个 尺寸 属性 时 , 另外 一 个 尺寸 就 以 图 片 原始 的 长 宽 比 例 来 显示 。 图 片 的 尺寸 单位 可 以 
选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 。 


配 如 果 网 页 中 插入 的 图 像 都 是 位 图 ， 放 大 尺寸 图像 会 出 现 马 赛 克 ， 变 得 模 蝴 。 | 


在 Windows 中 查看 图 片 的 尺寸 , 只 需要 找到 图 像 文件 ,把 鼠标 指针 移动 到 图 像 上 ， 
停留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 说 明 图 像 文件 的 尺寸 。 尺 寸 后 显示 的 数字 代 
\ 表 图 像 的 宽度 和 高 度 ， 如 256 x 256。 


4.2.2 设置 图 像 的 提示 文字 


图 像 提示 文字 的 作用 有 两 个 。 首 先 ， 当 浏览 网 页 时 ， 如 果 图 像 下 载 完成 ， 将 鼠标 指针 放 在 
图 像 上 ， 鼠 标 指针 旁边 会 出 现 提示 文字 。 其 次 ， 如 果 图 像 没有 成 功 下 载 ,在 图 像 的 位 置 上 就 
显示 提示 文字 。 设 置 提示 文字 的 属性 为 alt。 

随 着 互联 网 技术 的 发 展 ， 网 速 已 经 不 是 制约 因素 ， 因 此 一 般 都 能 成 功 下 载 图 像 。 现在 , 在 
百度 、google 等 大 型 搜索 引擎 中 ， 搜 索 图 片 不 如 文字 方便 ， 如 果 给 图 片 添加 适当 提示 ， 可 以 方 
便 搜索 引擎 的 检索 。 
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下 面 的 实例 为 图 片 添加 提示 文字 效果 。 
【 例 4.4】 “实例 文件 :ch04\4.4.html) 


<html> 

<head> 

<title> 图 片 文字 提示 </title> 

</head> 

<body> 

<img src="images/meishi.jpg" alt=" 草 莓 甜 橙 沙 拉 "> 
</body> 

</html> 


在 正 9.0 中 预览 效果 如 图 4-8 所 示 。 用 户 将 鼠标 放 在 图 片上 ， 即 可 看 到 提示 文字 。 


和 全 EN 工作 任务 \ 北 京 \r 只 ”CX | 车 男 上 文字 得 示 
文件 中 史 颖 (E] 豆 看 V) 。 收 匡 交 (A) 工具 (T) 帮 动 (H) 


图 4-8 图 片 文字 提示 


功 在 火狐 浏览 器 中 不 支持 该 功能 。 | 


4.2.3 ”将 图 片 设置 为 网 页 背景 


在 插入 图 片 时 ， 用 户 可 以 根据 需要 将 某 些 图 片 设置 为 网 页 的 背景 。Gif 和 jpg 文件 均 可 用 
作 HTML 网 页 的 背景 。 如 果 图 像 小 于 页 面 大 小 ， 图 像 会 重复 显示 。 
【 例 4.5】 《实例 文件: ch04\4.5.html) 


<html> 

<body background="images/background.jpg"> 
<h3> 图 像 背 景 </h3> 

</body> 

</html> 
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在 正 9.0 中 预览 效果 如 图 4-9 所 示 。 


(DS HAUsersAdminist D = © XB HUsers administr., «| 


文件 有 ) 疆 确 (E) 查看 (V) 收藏 实 (A) 工具 (T) 帮 动 (H) 


4-9 图 片 背景 
4.2.4 ”排列 图 像 


如 果 在 网 页 的 文字 中 插入 图 片 , 就 可 以 对 图 像 进行 排列 。 常 用 的 排列 方式 为 居中 、 底 部 对 
齐 、 顶 部 对 齐 。 
【 例 4.6】“〔 实 例文 件 : ch04\4.6.html) 


<html> 

<body> 

<h2> 未 设置 对 齐 方式 的 图 像 ， </h2> 

<p> 图 像 <img src ="images/logo.gif"> 在 文本 中 </p> 

<h2> 已 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src=" images/logo.gif " align="bottom"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif " align="middle"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif " align="top"> 在 文本 中 </p> 
</body> 

</html> 


在 正 9.0 中 预览 效果 如 图 4-10 所 示 。 


底部 对 齐 方式 是 默认 的 对 齐 方式 。 
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ECE 


未 设置 对 齐 方式 的 图 像 : 


DAY 
saBai 今 国 片 


在 文本 中 


已 设置 对 齐 方式 的 图 像 : 


06 
ae 已 ai 人 全国 片 
图 像 ee 在 文本 中 
BaiD 国 片 
图 像 00 在 文本 中 
Ey 
Bai 夕 国 片 
图 4-10 图 片 对 齐 方式 


4.3 综合 实战 一 -制作 茂 森 房地产 广告 网 页 


本 章 讲述 了 网 页 组 成 元 素 中 最 常用 的 文本 和 图 片 。 下 面 的 综合 实例 创建 了 一 个 由 文本 和 图 
片 构成 的 房屋 装饰 效果 网 页 ， 如 图 4-11 所 示 。 


meowenm >] Snmarassns | CE 


清新 活力 宏 居 与 人 文 曾 


图 4-11 房屋 装饰 效果 网 页 
具体 操作 步骤 如 下 。 


(04 在 Dreamweaver CS5.5 中 新 建 HTML 文档 ， 并 修改 成 HTML 标准 ， 代 码 如 下 。 


<html > 
<head> 
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<title> 房 屋 装饰 装修 效果 图 </title> 
</head> 
<body> 
</body> 
</html> 


W023 在 body 部 分 增加 如 下 HTML 代码 。 保 存 页 面 。 


<p> <img src="images/xiyatu.jpg" width="300" height="200"/> <img src="images/stadshem.jpe" width="300" 
height="200"/><br /> 

西雅图 原生 态 公寓 室内 设计 与 Stadshem 小 户型 公寓 设计 〈 带 阁楼 ) </p> 

<hr/> 

<p> <img src="images/qingxinhuolijpg” width="300” height="200"/> <img src="images/renwen.jpg" 
width="300" height="200"/><br /> 

清新 活力 家 居 与 人 文 简约 悠然 家 居 </p> 

<hr/> 


<hr> 标 记 的 作用 是 定义 内 容 中 的 主题 变化 ， 并 显示 为 一 条 水 平 线 ， 在 HTML 中 它 
没有 任何 属性 。 


另外 ， 要 快速 插入 图 片 ， 可 以 借助 Dreamweaver CS5.5 的 插入 功能 ， 或 按 下 快捷 键 
Ctrl+AltHI。 


4.4 专家 解 惑 


1. 在 浏览 器 中 无 法 显示 图 片 。 


答 : 图 片 在 网 页 中 属于 嵌入 对 象 , 并 不 是 保存 在 网 页 中 , 网 页 只 是 保存 了 指向 图 片 的 路 径 。 
览 器 在 解释 HIML 文件 时 ， 会 按 指 定 的 路 径 去 寻找 图 片 ， 如 果 在 指定 的 位 置 不 存在 图 片 ， 
片 就 无 法 正常 显示 。 为 了 保证 图 片 的 正常 显示 ， 制 作 网 页 时 需要 注意 以 下 几 点 。 

(1) 图 片 格式 一 定 是 网 页 支持 的 。 

(2) 图 片 的 路 径 一 定 要 正常 ， 并 且 图 片 文 件 扩展 名 不 能 省 略 。 

(3) HTML 文件 位 置 发 生 改变 时 ， 图 片 一 定 要 跟着 改变 ， 即 图 片 位 置 和 HIML 文件 位 置 
始终 保持 相对 一 致 。 


2. 网 页 设计 中 ， 图 像 如 何 使 用 ? 


图 像 内 容 应 有 一 定 的 实际 作用 , 切忌 虚 饰 浮夸 。 图 画 可 以 弥补 文字 之 不 足 , 但 并 不 能 完 
取代 文字 。 很 多 用 户 把 浏览 软件 设 定 为 略 去 图 像 ， 以 求 节省 时 间 ， 他 们 只 看 文字 。 因 此 ， 制 作 
主页 时 , 必须 注意 将 图 像 所 连接 的 重要 信息 或 联接 其 他 页 面 的 指示 用 文字 重复 表达 几 次 , 同时 
要 注意 避免 使 用 过 大 的 图 像 , 如 果 不 得 不 放置 大 的 图 像 在 网 站 上 , 应 该 把 图 像 的 缩小 版 本 的 预 
览 效果 显示 出 来 ， 这 样 用 户 就 不 必 浪费 金钱 和 时 间 去 下 载 他 们 根本 不 想 看 的 大 图 像 。 
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< 网 页 超 讶 接 的 设计 


HTML 文件 中 最 重要 的 应 用 之 一 就 是 超 链接 ， 超 链接 是 一 个 网 站 的 灵魂 ，Web 上 的 网 页 
是 互相 链接 的 ， 单 击 被 称 为 超 链接 的 文本 或 图 形 就 可 以 链接 到 其 他 页 面 。 


5.1 链接 和 路 径 


链接 是 网 页 中 极为 重要 的 部 分 , 单 击 文档 中 的 链接 , 即 可 跳 转 至 相应 位 置 。 正 是 有 了 链接 ， 
才 可 以 在 网 站 中 相互 跳 转 而 方便 地 查阅 各 种 各 样 的 知识 ， 享 受 网 络 带 来 的 无 穷 乐趣 。 


5.1.1 超 链 接 的 概念 


浏览 网 页 就 是 从 一 个 文档 跳 转 到 另 一 个 文档 , 从 一 个 位 置 跳 转 到 另 一 个 位 置 , 从 一 个 网 站 
跳 转 到 另 一 个 网 站 的 过 程 ， 而 这 些 过 程 都 是 通过 链接 来 实现 的 。 

利用 链接 可 以 实现 文档 之 间或 文档 中 的 跳 转 。 链 接 由 两 个 端点 (也 称 锚 ) 和 一 个 方向 构成 ， 
通常 将 开始 位 置 的 端点 称 做 源 端点 (或 源 锚 ), 而 将 目标 位 置 的 端点 称 为 目标 端点 (或 目标 锚 )， 
链接 就 是 从 源 端点 到 目标 端点 的 一 种 跳 转 。 如 图 5-1 所 示 , 在 114 啦 网 址 导航 页 面 中 单 击 【 百 
度 】 超 级 链接 ， 即 可 打开 百度 首页 ， 如 图 5-2 所 示 。 


= r= 
rE 更: 5 [本 [上 
[ET 和 7 和 TO 一 EDR VE 
TTRCTTTTETT ~ 
| : 并 
48200 BM 池州 x 
| sh Bai 舍 百度 
视 吵 MP] 区 片 各 证 。 电 简 
Bai 网 页 些 
| 百度 一 下 
站 于 H7N9 中 国 已 友 栅 87 出 作 同 认 
| hid 百度 - M 严 贺 。 新 浪 - 角 博信 3 23 | 于 名 
ba 谷歌 风 有 -视频 和 
族 洗 有 域 。。 伟 兰 -土豆 地 
(ls 划 宁 了 saFlt 下 a | | 


图 5-1 114 啦 网 址 导航 页 面 图 5-2 百度 首页 


精囊 HTML+C55 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


医 目标 端点 可 以 是 任意 的 网 络 资源 ， 例 如 ， 可 以 是 一 个 页 面 、 一 幅 图 像 、 一 段 声音 、 
( 一 段 程序 ， 甚 至 可 以 是 页 面 中 的 菜 个 位 置 。 


5.1.2 ”链接 路 径 URL 


URL 为 Uniform Resource Locator 的 缩写 ， 通 常 翻译 为 “统一 资源 定位 器 ”， 也 就 是 人 们 
常 说 的 “网 址 ”。 它 用 于 指定 Internet 上 的 资源 位 置 。 
1. URL 的 格式 


网 络 中 的 计算 机 之 间 是 通过 IP 地 址 区 分 的 ， 如 果 希 望 访问 网 络 中 某 台 计算 机 中 的 资源 ， 
首先 要 定位 到 这 台 计 算 机 。 卫 地 址 由 32 位 的 二 进 制 ， 即 32 个 0/1 代码 组 成 ,数字 之 间 没 有 意 
义 ， 不 容易 记忆 。 为 了 方便 记忆 , 现在 计算 机 一 般 采 用 域名 的 方式 来 寻 址 ， 即 在 网 络 上 使 用 一 
组 有 意义 字符 组 成 的 地 址 代替 IP 地 址 来 访问 网 络 资源 。 

URL 由 4 个 部 分 组 成 ， 即 “协议 ”、“ 主 机 名 ”、“ 文 件 夹 名 ”和 “文件 名 ”， 如 图 5-3 
所 示 。 


http://www. webDesign. com/pages/computer. html 
tp:// Wem. mopr ps sn. oon 


协议 主机 名 文件 夹 名 文件 名 
5-3 URL 组 成 


互联 网 中 有 各 种 各 样 的 应 用 ， 如 Web 服务 、FTP 服务 等 。 每 种 服务 应 用 都 有 对 应 的 协议 ， 
通常 通过 浏览 器 浏览 网 页 的 协议 都 是 HTTP 协议 ， 即 “ 超 文本 传输 协议 ”， 因 此 通常 网 页 的 地 
址 都 以 “http:/” 开 头 。“www.baidu.com” 为 主机 名 ， 表 示 文 件 存在 于 哪 台 服 务 器 ， 主 机 名 
可 以 通过 IP 地 址 或 者 域名 来 表示 。 确 定 到 主机 后 ， 还 需要 说 明文 件 存在 于 这 台 服 务 器 的 哪个 
文件 夹 中 ， 这 里 文件 夹 可 以 分 为 多 个 层级 。 确 定 文件 夹 后 ， 就 要 定位 到 文件 ， 即 要 显示 哪个 文 
件 ， 网 页 文件 通常 是 以 “.html” 或 “.htm” 为 扩展 名 。 


2. URL 的 类 型 
超 链接 的 URL 可 以 分 为 两 种 类 型 : 绝对 URL 和 相对 URL。 


@ 绝对 URL 一 般 用 于 访问 非 同一 台 服 务 器 上 的 资源 。 

@ 相对 URL 是 指 访问 同一 台 服 务 器 上 相同 文件 夹 或 不 同文 件 夹 中 的 资源 。 如 果 访 问 相 
同文 件 夹 中 的 文件 ， 只 需要 写 文件 名 ; 如 果 访 问 不 同文 件 夹 中 资源 ，URL 以 服务 器 的 
根 目录 为 起 点 ， 指 明文 档 的 相对 关系 ， 由 文件 夹 名 和 文件 名 两 部 分 构成 。 


下 面 的 实例 分 别 使 用 绝对 URL 和 相对 URL 实现 超 链 接 。 
【 例 5.1】 实 例文 件 ，ch05\5.1.html) 


<html> 
<head> 
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<title> 绝 对 URL 和 相对 URL</title> 

</head> 

<body> 
单 击 <a hre 人 "http://www.webDesign.conmyindex.html"> 绝 对 URL</a> 链 接 到 webDesign 网 站 首页 <br /> 
单 击 <a hre 伍 "02.html"> 相 同文 件 夹 的 URL</a> 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 <br /> 
单 击 <a href="../pages/03.html"> 不 同文 件 夹 的 URL</a> 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 

</body> 

</html> 


在 上 述 代码 中 ， 第 1 个 链接 使 用 的 是 绝对 URL; 第 2 个 使 用 的 是 服务 器 相对 URL， 也 就 
是 链接 到 文档 所 在 服务 器 根 目录 下 的 02.html; 第 3 个 使 用 的 是 文档 相对 URL， 即 原文 档 所 在 


文件 夹 的 父 文件 夹 下 面 的 pages 文件 夹 中 的 03 .html 文件 。 
在 正 9.0 中 预览 网 页 效果 如 图 5-4 所 示 。 


人 RHNusersAdminist P - © X | @ NURLAOEITURL 
文件 中 。 测 矣 (和 ”得 看 (V) 妇 基 (A) 工具 (T) 帮助 (H) 


单 击 绝对 URL 链 接 到 webDesign 网 站 首页 
单 击 相同 的 URL 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 
单 击 企 的 URL 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 


图 5-4 绝对 URL 和 相对 URL 
5.1.3 ”HTTP 路 径 


HTTP 路 径 用 来 链接 Web 服务 器 中 的 文档 。 下 面 是 HTTP 路径 的 几 种 写法 。 


@ http:// 域 名 /目录 /目标 文件 
@ http:// 域 名 /目录 /目标 文件 # 片 段 
@ http:// 域 名 /目录 /目标 文件 ? 变量 名 = 变量 参数 


其 中 第 一 种 链接 是 最 普通 的 链接 格式 , 不 使 用 任何 参数 和 变量 ; 第 二 种 是 链接 到 目标 文件 
的 某 个 一 个 片段 的 位 置 上 ; 第 三 种 是 传递 某 个 参数 ， 使 用 相应 的 程序 来 处 理 相 关内 容 。 
【 例 5.2】〔 实 例文 件 : ch05\5.2.html) 


<html> 

<head> 

<title>HTTP 路 径 </title> 

</head> 

<body> 

链接 地 址 : <a hre 全 "http://www.baidu.comyindex php?tn=myppcb&bar=11"> 链 接 </a> 
</body> 
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</html> 


在 焉 9.0 中 预览 网 页 ， 当 单 击 含有 链接 的 文本 时 ， 显 示 效 果 如 图 5-5 所 示 。 


图 5-5 使 用 普通 HTTP 路 径 的 显示 效果 


5.1.4 ”FTP 路 径 


FTP 路 径 用 来 链接 FTP 〈File Transfer Protocol， 文 件 传输 协议 ) 服务 器 中 的 文档 。 下 面 是 
FTP 路 径 可 以 使 用 的 写法 。 


<A href="ftp://……"> 链 接 文 字 </A> 


其 中 ， 域 名 和 IP 地 址 是 服务 器 地 址 的 两 种 写法 ， 都 代表 网 络 中 唯一 的 标识 。 如 果 要 在 网 
页 中 使 用 FTP 链接 ， 可 使 用 如 下 的 写法 。 


ftp://ftp 域名 /目录 


使 用 FTP 路 径 时 ， 可 以 在 浏览 器 中 直接 输入 相应 的 FTP 地址， 打开 相应 的 目录 或 者 下 载 
相关 内 容 。 也 可 以 使 用 相关 的 软件 ， 打 开 FTP 地 址 中 相应 的 目录 或 者 下 载 相关 内 容 。 
【 例 5.3】〔 实 例文 件 : ch05\5.3.html) 


<html> 

<head> 

<title>FTP 路 径 </title> 

</head> 

<body> 

链接 中 使 用 FTP 路 径 : <a hre 伍 "ftp://ftp.lele.cn" target="” blank"> 链 接 内 容 </a> 


</body> 
</html> 


在 正 9.0 中 预览 网 页 ， 当 单 击 含 有 链接 的 文本 时 ， 显 示 效果 如 图 5-6 所 示 。 可 以 看 出 ， 此 
时 打开 一 个 新 的 窗口 ， 显 示 了 此 目录 下 所 有 的 文件 ， 可 以 使 用 复制 、 粘 贴 功 能 , 或 者 借助 下 载 
软件 来 下 载 目录 中 的 内 容 。 


图 5-6 使 用 FTP 路 径 的 显示 效果 
5.1.5 ”电子 邮件 路 径 
电子 邮件 路 径 用 来 链接 一 个 电子 邮件 的 地 址 。 下 面 是 邮件 路 径 可 以 使 用 的 写法 。 


【 例 5.4】 (实例 文件 :ch05\5.4.html) 


其 代码 运行 后 ， 当 单 击 含有 链接 的 文本 时 ， 会 弹出 一 个 发 送 邮 件 的 对 话 框 ， 显 示 效 果 如 图 


5-7 所 示 。 


贺 wrassem 回 - 


图 5-7 使 用 电子 邮件 路 径 的 显示 效果 
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5.2 ”链接 元 素 


在 HTML 中 ， 链 接 元 素 为 <a>，<a> 标 签 可 定义 锚 。 锚 〈anchor) 有 两 种 用 法 : 


@ 通过 使 用 href 属性 ， 创 建 指向 另外 一 个 文档 的 链接 ( 或 超 链接 )。 
@ 通过 使 用 name 或 id 属性 ， 创 建 一 个 文档 内 部 的 书签 (也 就 是 说 ， 可 以 创建 指向 文档 
片段 的 链接 )。 


5.2.1 ”链接 元 素 <a> 


链接 元 素 <a> 用 来 定义 一 个 超 链接 , 前 面 使 用 链接 时 已 经 用 到 <a> 元 素 , 其 实在 <a> 元 素 中 ， 
不 但 可 以 包含 文本 内 容 ， 也 可 以 包含 图 片 等 其 他 内 容 。 语 法 结构 如 下 所 示 。 


<a href=" 链 接 的 路 径 "> 链接 的 文本 </a> 


在 <a> 元 素 中 ， 一 般 要 指定 href 属性 ， 用 来 指向 链接 的 目标 。 
【 例 5.5】《〔 实 例文 件 : ch05\5.5.html) 


<html> 

<head> 

<title> 链 接 元 素 <a></title> 

</head> 

<body> 

链接 元 素 ，<a href="http://www.baidu.com"> 链 接 内 容 </a> 
</body> 

</html> 


其 代码 运行 后 ， 显 示 效 果 如 图 5-8 所 示 。 当 单 击 页 面 中 含有 链接 的 文本 时 ， 显 示 效 果 如 图 
5-9 所 示 。 


[SEE 


文件 ( 明 。 痊 强 (E) 得 看 (V)。 收 宇 突 (A) 工具 mm) 帮 动 (H) 


篇 者 (E) 至 看 (V) 。 收 草 闪 (A) 工具 (T) 帮助 (H) 


Bai 代 天 度 


新 闻 网 页 贴吧 知道 音乐 图 片 视频 地 


图 5-8 ”使 用 <a> 元 素 的 显示 效果 图 5-9 单 击 链接 文本 后 的 显示 效果 
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此 时 由 于 <a> 元 素 中 没有 定义 其 他 任何 属性 ， 所 以 链接 的 目标 页 面 ， 将 在 <a> 元 素 | 
所 在 的 页 面 中 打开 ， 而 不 会 弹出 新 的 页 面 。 


5.2.2 ”指定 路 径 属性 href 
指定 路 径 属性 href 用 来 指定 链接 元 素 <a> 的 目标 地 址 。 语 法 结构 如 下 。 
<a hre 作 "链接 的 路 径 "> 链接 的 文本 </a> 
【 例 5.6】 《实例 文件 ，ch05\5.6html) 


<head> 
<title> 指 定 路 径 属性 href </title> 
</head> 


<body> 
链接 元 素 : <a href="http://www.114la.com"> 链 接 内 容 </a> 


</html> 
其 代码 运行 后 ， 显 示 效 果 如 图 5-10 所 示 。 当 单 击 链接 的 文本 时 ， 显 示 效 果 如 图 5-11 
所 示 。 


[ol 芽 


[全 SEE 


| 文件 由 蝙 缉 (E)】 下 看 (V) 收 基 妆 (A) 工具 (D) 。 帮助 (H) 
T 


者 助 (H) 


欢迎 您 来 到 11 鱼 六 址 导航 ! 


加 | 日 
WA 


| 链接 元 素 ， 链 接 内 容 


www.114la.com 


视频 Mp3 。 图 片 
Bai 癌 EE 度 | 


陵 支 7 架 地 震 已 至 多 人 死亡 名 站 导航 我 的 导 - 


和 i 
图 5-10 使 用 href 属性 的 显示 效果 图 5-11 单 击 链接 文本 后 的 显示 效果 
5.2.3 ”显示 链接 目标 属性 target 
显示 链接 目标 属性 target 用 来 指定 链接 目标 文件 显示 的 窗口 。 语 法 结构 如 下 。 
<a hre 全 "链接 的 路 径 " target=” 目 标 窗口 或 指定 值 ”> 链接 的 文本 </a> 


target 属性 的 取 值 有 _self、_blank、_parent 和 _top。 
下 面 给 出 一 个 实例 ， 其 target 取 值 为 _self。 
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【 例 5.7】 “实例 文件 :ch05\5.7.html) 


<html> 

<head> 

<title> 显 示 链 接 目标 属性 1</title> 

</head> 

<body> 

链接 元 素 ， 链接 内 容 <a hre 伍 "http://www.baidu.com/" target=”self'> 链 接 内 容 </a> 

</body> 

</html> 

其 代码 运行 后 ， 显 示 效 果 如 图 5-12 所 示 。 当 单 击 页 面 中 含有 链接 的 文本 时 ， 页 面 跳 转 ， 
显示 效果 如 图 5-13 所 示 。 


| 司 bu:erewdnnisP -cx | | 国 ho febsid.. P - ox 图 下, frm 
XM RT | | DE 二 VA 工具 wir 


偿 接 元 于 链接 内 容桂 接 内 容 ms 


Bai 并 百度 
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图 5-12 使 用 target 属性 值 为 self 的 显示 效果 图 5-13 单 击 链接 文本 后 的 显示 效果 


当 target 属性 取 值 为 _blank 时， 下面 给 出 一 个 实例 。 
【 例 5.8】“〈 实 例文 件 : ch0s\5.8.html) 


<html> 

<head> 

<title> 显 示 链接 目标 属性 2</title> 
</head> 


<body> 
链接 元 素 : 链接 地 址 <a hre 伍 "http://www.baidu.com/" target="” blank"> 链 接地 址 </a> 


</body> 
</html> 


其 代码 运行 后 ， 当 单 击 含有 链接 的 内 容 时 ， 新 的 内 容 会 在 新 的 窗口 显示 ， 而 不 会 覆盖 原 窗 
口 的 内 容 ， 其 显示 效果 如 图 5-14 所 示 。 
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le Brrr 站 

xf al BEM waxnl (p/mbsid.. P- cx 

下 H) 

链接 元 素 ， 链 接地 址 链接 地 址 文件 (有 六 筷 (E) i SE 工具 (T) ”帮助 (H) 
搜索 设置 | 登录 注册 


pode | 
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5-14 使 用 target 属性 值 为 blank 的 显示 效果 


慑 却 | 当 target 属性 取 值 为 parent 和 top 时 ， 其 显示 效果 和 使 用 _self 值 相同 ， 均 为 在 当 | 
\ 前 窗口 中 显示 目标 页 面 。 


5.2.4 激活 顺序 属性 tabindex 


激活 顺序 属性 tabindex， 用 来 指定 当 按 下 Tab 键 时 ， 页 面 中 链接 的 激活 顺序 。 语 法 结构 如 
下 。 


<a href=" 链 接 的 路 径 " tabindex= "数字 值 "> 链接 的 文本 </a> 


本 tabindex 属性 的 取 值 是 大 于 0 的 整数 。 下 面 是 一 个 使 用 tabindex 属性 的 实例 。 | 


【 例 5.9】〔 实 例文 件 : ch05\5.9.html) 


<html> 

<head> 

<title> 激 活 顺 序 属性 </title> 

</head> 

<body> 

链接 路 径 1: <a hre 伍 "http://www.baidu.com" tabindex="2"> 链 接 内 容 </a><br /> 
链接 路 径 2: <a hre 伍 "http://www.114la.com" tabindex="3"> 链 接 内 容 </a><br /> 
链接 路 径 3: <a hre 伍 "http://www.sina.com" tabindex="1"> 链 接 内 容 </a> 
</body> 

</html> 


其 代码 运行 后 ， 按 下 键盘 的 Tab 键 ， 可 以 依次 激活 页 面 中 的 链接 ， 如 图 5-15 所 示 。 
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[ome =- 文 


a | HusersAdminist P - © x | @ amet 


次 宇 夫 (A) ”工具 (D) 才 动 (H) 


图 5-15 使 用 tabindex 属性 的 显示 效果 


当 按 下 Tab 键 时 ， 页 面 中 链接 元 素 2 被 激活 ， 如 图 5-16 所 示 。 此 时 ， 按 下 Enter 键 打开 
链接 ， 其 显示 效果 如 图 5-17 所 示 。 


Fe 区 


JJ 国 加 bwenwdnnap -cx| EB aas 
文件 (F) 妨 强 (E) 查看 (V) 收藏 突 (A) 工具 和 T) 帮助 (H) | 


链接 路 径 1: 
链接 路 径 2, 
链接 路 径 3， 


农历 三 月 十 一 


www.114la.com 


| 下放 ] 视频 。 MP3 

Bai 必 村 

可 而 (ms 
5-16 按 下 Tab 键 激活 链接 后 的 显示 效果 5-17 按 下 Enter 键 打开 链接 后 的 显示 效果 

5.2.5 ”链接 的 热 键 属性 accesskey 

链接 的 热 键 属性 accesskey 用 来 指定 激活 链接 所 使 用 的 键 。 语 法 结构 如 下 。 

<a href=" 链 接 的 路 径 " accesskey= "键盘 上 的 键 值 "> 链接 的 文本 </a> 

由 于 用 户 使 用 的 操作 系统 不 同 ， 要 在 键盘 上 按 下 相应 的 键 (Window 中 为 Alt 键 ) ， 同 时 
按 下 定义 的 热 键 ， 才 能 激活 定义 的 链接 。 链 接 激活 后 ， 按 下 键盘 的 Enter 键 ， 可 打开 相应 的 链 
接 。 

下 面 是 一 个 使 用 accesskey 属性 的 实例 。 

【 例 5.10】 《实例 文件 :ch05\S.10.html) 


httpy/wwwll4lacomy 


<html> 
<head> 
<title> 激 活 顺 序 属性 </title> 
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</head> 


<body> 
链接 元 素 : <a href="http://www.baidu.com" accesskey="z"> 链 接 内 容 </a> 


</body> 
</html> 
其 代码 运行 后 ， 显 示 效 果 如 图 5-18 所 示 。 当 同时 按 下 键盘 上 的 Alt 和 Z 键 时 ， 链 接 文 本 
被 激活 ， 其 显示 效果 如 图 5-19 所 示 。 


(DO De wenn -ox Ew (Oe eranins p+ ox wasnse 
文件 (F) ” 蝙 辑 (E) ”可 看 (V) ”收藏 闪 (A) 工具 (T) 助 (H) 文件 (有 ” 编 注 (E) ”可 看 (V) ”收藏 夫 (A) ”工具 (T) 帮助 (H) | 


链接 元 素 ， 链 接 内 容 


图 5-18 ”使 用 accesskey 属性 的 显示 效果 5-19 ”链接 文本 被 激活 后 的 显示 效果 


从 图 5-19 可 以 看 出 ， 激 活 的 链接 文本 ， 会 在 文本 上 产生 一 个 虚线 框 ， 用 来 表明 该 链接 已 
经 被 激活 。 当 按 下 Enter 键 时 ， 打 开 链 接 的 页 面 ， 如 图 5-20 所 示 。 


局 -] 荐 : 


httpy/wwwbaid. 训 - CX | 图 吾 变 一 下 


文件 (F) 。 帝 句 (E) 得 看 (V) 收藏 闪 (A) 工具 (T) 者 动 (H) 


Bai 巡 惠 度 
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图 5-20 按 下 Enter 键 打开 链接 后 的 显示 效果 
5.2.6 ”链接 到 同一 页 面 的 不 同位 置 
在 建立 链接 时 , 尤其 是 文字 比较 多 的 网 页 ， 需要 在 同一 页 面 的 不 同位 置 进行 链接 ,这 时 就 
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需要 建立 同一 网 页 内 的 链接 。 语 法 结构 如 下 。 
<a hre 合 "# 链 接 位 置 "> 链接 文字 </a> 
【 例 5.11】 《实例 文件 :ch05\S.11.html) 


<html> 
<body> 

<p> 

<a href="#C4"> 查 看 第 4 章 。</a> 
</p> 

<h2> 第 1 章 </h2> 

<p> 本 章 讲解 图 片 相 关 知 识 ……</p> 
<h2> 第 2 章 </h2> 

<p> 本 章 讲解 文字 相关 知识 ……</p> 
<h2> 第 3 章 </h2> 

<p> 本 章 讲解 动画 相关 知识 ……</p> 
<h2><a name="C4"> 第 4 章 </a></h2> 
<p> 本 章 讲解 图 形 相关 知识 ……</p> 
<h2> 第 5 章 </h2> 

<p> 本 章 讲解 列表 相关 知识 ……</p> 
<h2> 第 6 章 </h2> 

<p> 本 章 讲解 列表 相关 知识 ……</p> 
</body> 

</html> 


在 下 9.0 中 预览 网 页 效果 如 图 5-21 所 示 。 单 击 页 面 中 的 链接 ， 即 可 将 “第 4 章 ” 的 内 容 
跳 转 到 页 面 顶部 ， 如 图 5-22 所 示 。 


[@ re// users/sd P » OX | Hvsers Administr.. > 【< Oe fiesers/sd P+- xe HAUsersAdministr, 


Evo 文件 月 ”多 强 (和 吾 香 (V】 收藏 (A) 工具 (T) 入 时 [HH) 
查看 第 境 。 | 第 4 章 | 
第 1 章 本 章 讲解 图 形 相关 知识 
本 章 讲解 图 片 相关 知识 …… 第 5 章 
第 2 章 
本 章 讲解 列表 相关 知识 

本 章 讲 解 文字 相关 知识 …… 
| 第 3 章 第 6 章 
本 章 计 解 动画 相关 知识 … | 上 上 本章 讲解 列表 相关 知识 

图 5-21 链接 页 面 图 5-22 链接 到 “第 4 章 ” 
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5.3 ”图像 链接 
图 像 中 的 链接 包括 为 图 像 元 素 制作 的 链接 和 在 图 像 局 部 制作 的 链接 。 其 中 在 图 像 的 局 部 制 
作 链 接 比 较 复杂 ， 会 用 到 <map>、<area> 等 元 素 及 其 相关 属性 。 
5.3.1 创建 链接 区 域 元 素 <map> 


<map> 元 素 的 主要 作用 是 标记 链接 区 域 。 <map> 元 素 本 身 并 不 能 指定 链接 区 域 的 大 小 和 链 
接 目 标 。 页 面 中 的 图 像 元素 可 以 使 用 <map> 元 素 标记 的 区 域 。 语 法 结构 如 下 。 


<map> 其 他 元 素 </map> 


国 <map> 元 素 一 般 要 结合 <area> 元 素 一 起 使 用 。 | 


5.3.2 ”链接 区 域 的 名 称 属性 name 


链接 区 域 的 名 称 属性 name 用 来 定义 链接 区 域 的 名 称 ， 以 方便 图 像 元 素 的 调用 。 语 法 结构 
如 下 。 


<map name=" 名 称 "> 其 他 元 素 </map> 


国 name 属性 的 取 值 必须 是 唯一 的 。 | 


5.3.3 ”定义 鼠标 敏感 区 元 素 area 


定义 鼠标 敏感 区 元 素 <area> 用 来 定义 链接 区 域 的 大 小 和 坐标 , 同时 可 以 指定 每 个 敏感 区 域 
的 链接 目标 。 语 法 结构 如 下 。 

<map name=" 名 称 "> 

<area 属性 =" 属 性 值 " 上 > 

</map> 

下 面 给 出 一 个 使 用 <area> 元 素 的 实例 。 

【 例 5.12】 《实例 文件 ，ch05\5.12.html) 


<html> 

<head> 

<title> 鼠 标 敏感 区 </title> 

</head> 

<body> 

<img src=" 小 花 .jpg" alt=" 郁 金 香 " border="0" usemap="#Map" /> 

<map name="Map" id="Map"> 

<area shape="rect" coords="27.20.132.122" href="http://www.baidu.com" /> 
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<area shape="rect" coords="226.61.322.200" hre 人 ="http://www.haol123.com" /> 

<area shape="circle" coords="114,235,52" href="http://www.sina.com" /> 

</map> 

</body> 

</html> 

该 实例 中 ， 在 图 片 中 定义 了 三 个 链接 区 域 ， 分 别 链接 到 百度 、hao123 和 新 浪 的 站 点 首页 。 
在 图 片 的 局 部 制作 链接 后 , 对 图 片 的 显示 效果 并 没有 影响 。 其 代码 运行 后 ,显示 效果 如 图 5-23 
所 示 。 


(DOB mmoninn p- ox | mms x 


文件 (月 ” 激 强 (E) 。 豆 看 (V) ”收藏 闪 (A) 工具 (TD) 帮 动 (H) 


https//www.sina.com/ 


图 5-23 局 部 定义 链接 后 的 图 像 元 素 
5.3.4 ”链接 的 路 径 属 性 href 


指定 路 径 属 性 href 用 来 指定 链接 的 地 址 。 不 指定 路 径 属性 nohref 用 来 不 指定 链接 的 地 址 。 
其 中 href 属性 和 <a> 元 素 中 的 href 属性 完全 相同 。 使 用 指定 路 径 属性 href 的 语法 如 下 。 


<map name=" 名 称 "> 

<area href=" 指 定 的 路 径 " /> 

</map> 

不 指定 路 径 属 性 nohref 的 语法 如 下 。 
<map name=" 名 称 "> 

<area nohref="nohref’ /> 

</map> 


下 面 给 出 一 个 使 用 < area nohref > 元 素 的 实例 。 
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【 例 5.13】 实例 文件 :ch05\5.13.html) 


<html> 

<head> 

<title>< area nohref > 元 素 </title> 

</head> 

<body> 

<img src=" 小 花 .jpg" alt=" 郁 金 香 " border="0" usemap="#Map" /> 

<map name="Map" id="Map"> 

<area shape="rect" coords="27,20,132,122" nohref="http://www.baidu.com" /> 
<area shape="rect" coords="226.61,322.200"nohref="http://www.hao123.com" /> 
<area shape="circle" coords="114,235,52" nohref="http://www.sina.com" /> 
</map> 

</body> 

</html> 


使 用 了 nohref 属性 的 区 域 ， 当 鼠标 悬 停 的 时 候 ， 将 不 再 显示 手 的 形状 。 其 代码 运行 后 ， 
显示 效果 如 图 5-24 所 示 。 


_ 本 本 区 本 

At 

EE) HusersAdminist DP - cx 四 < area nohref > 元 素 x 
文件 (月 。 端 句 (E) ”得 看 (V) 收藏 突 (A) ”工具 (TD) 。 帮助 (H) 


图 5-24 ”使 用 < area nohref> 元 素 链接 后 的 图 像 元 素 
5.3.5 ”链接 的 文本 说 明 属 性 alt 


链接 的 文本 说 明 属 性 alt 用 来 使 用 附加 的 文本 对 链接 进行 说 明 。 和 <img> 元 素 里 的 alt 属 
性 类 似 ， 当 鼠标 悬 停 在 某 个 链接 区 域 时 ， 将 会 显示 出 al 属性 中 附加 的 文本 。 语 法 结构 如 下 。 

<map name=" 名 称 "> 

<area alt=" 附 加 的 文本 " /> 

</map> 
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下 面 给 出 一 个 在 <area> 元 素 使 用 alt 属性 的 实例 。 
【 例 5.14】〔 实 例文 件 : ch05\5.14.html) 


<html> 

<head> 

<title> 链 接 的 文本 说 明 </title> 

</head> 

<body> 

<img src=" 小 花 .jpg" alt=" 郁 金 香 " border="0" usemap="#Map" /> 

<map name="Map" id="Map"> 

<area shape="rect" coords="30,21,132,112" href="http://www.baidu.com" alt=" 左 侧 链接 百度 " /> 
<area shape="rect" coords="221,62,312,210" href="http://www.hao123.com" alt=" 右 侧 链 接 hao123" /> 
<area shape="circle" coords="104,245,54" href="http://www.sina.com" alt=" 底 部 链接 新 浪 " /> 
</map> 

</body> 

</html> 


其 代码 运行 后 ， 当 鼠标 悬 停 在 相应 区 域 时 ， 会 出 现 相应 的 链接 ， 显 示 效 果 如 图 5-25 所 示 。 


Gx| 
工具 (T) 本 屿 (H) 


图 5-25 ”在 <area> 元 素 中 使 用 alt 属性 的 图 像 元 素 


5.4 专家 解 惑 


1. 在 创建 超 链接 时 ， 使 用 绝对 URL 还 是 相对 URL? 


答 : 在 创建 超 链接 时 , 如 果 要 链接 的 是 另外 一 个 网 站 中 的 资源 , 需要 使 用 完整 的 绝对 URL; 
如 果 在 网 页 中 创建 内 部 链接 ， 一 般 使 用 相对 当前 文档 或 站 点 根 文件 夹 的 相对 URL。 


2. 链接 增多 后 ， 网 站 如 何 设置 目录 结构 以 方便 维护 ? 
答 : 当 一 个 网 站 的 网 页 数量 增加 到 一 定 程度 以 后 , 网 站 的 管理 与 维护 将 变 得 非常 繁琐 ， 因 
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此 掌握 一 些 网 站 管理 与 维护 技术 是 非常 实用 的 , 可 以 节省 很 多 时 间 。 建立 适合 的 网 站 文件 存储 
结构 , 可 以 便于 网 站 的 管理 与 维护 。 通常 使 用 的 3 种 网 站 文件 组 织 结构 方案 及 文件 管理 遵循 的 


原则 如 下 。 


(1) 按照 文件 的 类 型 进行 分 类 管理 。 将 不 同类 型 的 文件 放 在 不 同 的 文件 夹 中 ， 这 种 存储 
方法 适合 于 中 小 型 的 网 站 ， 这 种 方法 通过 文件 的 类 型 对 文件 进行 管理 。 

(2) 按照 主题 对 文件 进行 分 类 。 网 站 的 页 面 按照 不 同 的 主题 进行 分 类 储存 。 将 同一 主题 
的 所 有 文件 存放 在 一 个 文件 夹 中 , 然后 再 进一步 细 分 文件 的 类 型 。 这 种 方案 适用 于 页 面 与 文件 
数量 众多 、 信 息 量 大 的 静态 网 站 。 

(3) 对 文件 类 型 进行 进一步 细 分 存储 管理 。 这 种 方案 是 第 一 种 存储 方案 的 深化 ， 将 页 面 


进一步 细 分 后 进行 分 类 存储 管理 
网 站 。 


E。 这 种 方案 适用 于 文件 类 型 复杂 、 包含 各 种 文件 的 多 媒体 动态 


HTML 中 的 表格 不 但 可 以 清晰 地 显示 数据 ， 而 且 可 以 用 于 页 面 布局 。HTML 中 的 表格 类 
似 于 Word 软件 中 的 表格 ， 尤 其 是 使 用 网 页 制作 工具 时 操作 很 相似 。 


6.1 表格 基本 结构 
HTML 制作 表格 的 原理 是 使 用 相关 标记 ， 如 表格 对 象 table 标记 、 行 对 象 tt 标记 和 单元 格 
对 象 td 标记 。 
6.1.1 表格 概述 


使 用 表格 显示 数据 更 直观 、 更 清晰 。 在 HTML 文档 中 表格 主要 用 于 显示 数据 ， 虽 然 可 以 
使 用 表格 布局 ， 但 是 这 里 不 建议 使 用 ， 它 有 很 多 弊端 。 表 格 一 般 由 行 、 列 和 单元 格 组 成 ， 如 图 
6-1 所 示 。 


图 6-1 表格 的 组 成 


6.1.2 ”用 于 创建 表格 的 标记 
在 HTML 中 用 于 创建 表格 的 标记 如 下 。 
@ ” <table> 标记: 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 记 用 于 标识 一 个 表格 对 象 的 结 
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来 。 一 个 表格 中 ， 只 允许 出 现 一 对 <table> 标 记 .。 

@ <tr> 标 记 : 用 于 标识 表格 一 行 的 开始 ，</tr> 标 记 用 于 标识 表格 一 行 的 结束 。 表 格 内 有 
多 少 对 <tr></tr> 标 记 ， 就 表示 表格 中 有 多 少 行 。 

@ <td> 标 记 : 用 于 标识 表格 某 行 中 的 一 个 单元 格 开始 ，</td> 标 记 用 于 标识 表格 某 行 中 的 
一 个 单元 格 结束 。<td></td> 标 记 书 写 在 <tr></tr> 标 记 内 ， 一 对 <tr></tr> 标 记 内 有 多 少 
对 <td></td> 标 记 ， 就 表示 该 行 有 多 少 个 单元 格 。 


最 基本 的 表格 必须 包含 一 对 <table></table> 标 记 、 一 对 或 几 对 <tr></t> 标 记 以 及 一 对 或 几 
对 <td></td> 标 记 。 一 对 <table></table> 标 记 定义 一 个 表格 ， 一 对 <tr></tr> 标 记 定义 一 行 ， 一 对 
<td></td> 标 记 定义 一 个 单元 格 。 

下 面 的 实例 定义 了 一 个 4 行 3 列 的 表格 。 

【 例 6.1】 实例 文件 :ch06\6.1.html) 


<html> 
<head> 
<title> 表 格 基本 结构 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>Al</td> 
<td>B1</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 
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在 下 9.0 中 预览 网 页 效果 如 图 6-2 所 示 。 


(DD. 装 HsersWdminist P - OX | @ ses 


文件 (月 ”六 强 (E) ”可 看 (V) 收 基 闪 (A) 工具 MT) 帮助 ” 


Al Bl C1 
A2 B2 C2 
A3 B3 C3 
Ad Ba ca 


图 6-2 表格 基本 结构 


全 | 从 图 6-2 中 ， 读 者 会 发 现 ， 表 格 没有 边框 ， 行 高 及 列 宽 也 无 法 控制 。 


6.2 创建 表格 


表格 可 以 分 为 普通 表格 和 带 有 标题 的 表格 ， 在 HTML 中 ， 可 以 创建 这 两 种 表格 。 
6.2.1 创建 普通 表格 


下 面 的 实例 创建 了 一 列 、 一 行 三 列 和 两 行 三 列 3 个 表格 。 
【 例 6.2】《〔 实 例文 件 :， ch06\6.2.html) 


<html> 
<body> 
<h4> 一 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
</tr> 
</table> 
<h4> 一 行 三 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
</table> 
<h4> 两 行 三 列 : </h4> 
<table border="1"> 


在 下 9.0 中 预览 网 页 效果 如 图 6-3 所 示 。 


图 6-3 程序 运行 结果 


6.2.2 ”创建 带 有 标题 的 表格 


有 时 ,为 了 方便 表述 表格 , 还 需要 在 表格 的 上 面 加 上 标题 。 下 面 的 实例 创建 了 一 个 带 有 标 
题 的 表格 。 
【 例 6.3】〔 实 例文 件 ，ch06\6.3.html) 


在 下 9.0 中 预览 网 页 效果 如 图 6-4 所 示 。 


数据 统计 表 
[100 200 00 


400 1500 i600 


图 6-4 带 有 标题 的 表格 
6.2.3 创建 完整 的 表格 


表格 中 最 常用 的 3 个 标记 是 <table>、<tr> 和 <td>， 使 用 它们 可 以 构建 出 最 简单 的 表格 。 为 
了 让 表格 结构 更 清楚 ， 并 配合 后 面 学 习 的 CSS 样式 ， 更 方便 地 制作 各 种 样式 的 表格 ， 表 格 中 
还 会 出 现 表 头 、 主 体 、 脚 注 等 ， 如 下 面 的 实例 所 示 。 

【 例 6.4】〔 实 例文 件 ，ch06\6.4.html) 
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<t> 
<th> 姓 名 </th><th> 性 别 </th><th> 成 绩 </thb> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<td> 平 均 分 </td><td colspan="2">540</td> 
</t> 
</tfoot> 
<tbody> 
<t> 
<td> 张 三 </td><td> 男 </td><td>560</td> 
</tr> 
<tr> 
<td> 李 四 </td><td> 男 </td><td>520</td> 
</t> 
</tbody> 
</table> 
</body> 
</html> 


从 上 面 的 代码 中 可 以 发 现 ， 使 用 caption 定义 了 表格 标题 ，<thead>、<tbody> 和 <tfoot> 标 
记 对 表格 进行 了 分 组 。 在 <thead> 部 分 使 用 <th> 标 记 代 蔡 <td> 标 记 定义 单元 格 ，<th> 标 记 定 义 
的 单元 格 默 认 加 粗 。 网 页 预览 效果 如 图 6-5 所 示 。 


[e-em 
| 国 HAusersAdminist D - 0 Xx gs 充 旦 夫 属 
文件 (F) ”编辑 (E) ”前 看 (V) ”收藏 夫 (A) ”工具 (T) 帮助 (H) 


学 生成 绩 单 
姓名 性 别 成 绩 
张 三 男 560 
本 四 男 520 


图 6-5 完整 的 表格 结构 


国 <caption> 标签 必须 紧 随 <table> 标签 之 后 。 | 


C 


6.3 设置 表格 属性 
在 了 解 了 表格 的 基本 结构 后 , 下 面 来 介绍 表格 的 基本 操作 ， 主 要 包括 创建 表格 、 设 置 表格 
的 边框 类 型 、 设 置 表格 的 表 头 、 合 并 单元 等 。 
6.3.1 定义 表格 的 边框 类 型 


使 用 表格 的 border 属性 可 以 定义 表格 的 边框 类 型 ， 如 常见 的 边框 加 租 的 表格 。 下 面 的 实 
例 创建 了 不 同 边框 类 型 的 表格 。 
【 例 6.5】〔 实 例文 件 : ch06\6.5.html) 


在 下 9.0 中 预览 网 页 效果 如 图 6-6 所 示 。 


图 6-6 不 同 边框 类 型 的 表格 
6.3.2 ”定义 表格 的 表 头 


表格 中 也 存在 表 头 , 常见 的 表 头 分 为 垂直 与 水 平 两 种 。 下 面 的 实例 分 别 创建 了 带 有 垂直 和 
水 平 表 头 的 表格 。 
【 例 6.6】 《实例 文件 :ch06\6.6.html) 


在 正 9.0 中 预览 网 页 效果 如 图 6-7 所 示 。 


图 6-7， 带 有 水 平 垂直 表 头 的 表格 
6.3.3 设置 表格 背景 
当 创 建 好 表格 后 ， 为 了 美观 ， 还 可 以 设置 表格 的 背景 。 
1. 定义 表格 背景 颜色 


为 表格 添加 背景 颜色 是 美化 表格 的 一 种 方式 。 下 面 的 实例 为 表格 添加 背景 颜色 。 
【 例 6.7】 (实例 文件 ，ch06\6.7.html) 


在 正 9.0 中 预览 网 页 效果 如 图 6-8 所 示 。 


图 6-8 为 表格 添加 背景 颜色 
2. 定义 表格 背景 图 片 
除了 可 以 为 表格 添加 背景 颜色 外 , 还 可 以 将 图 片 设置 为 表格 的 背景 。 下 面 的 实例 为 表格 添 


加 背景 图 片 。 
【 例 6.8】〔 实 例文 件 ，ch06\6.8.html) 


在 正 9.0 中 预览 网 页 效果 如 图 6-9 所 示 。 
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| HUsersAadminist PD - © x | BH 
IV】 次 磊 夫 (A) 工具 (T) 帮助 (H) 


图 6-9 为 表格 添加 背景 图 片 
6.3.4 设置 单元 格 背景 


除了 可 以 为 表格 设置 背景 外 ， 还 可 以 为 单元 格 设置 背景 。 下 面 的 实例 为 单元 格 添加 背景 。 
【 例 6.9】 “实例 文件 :ch06\6.9.html) 


<html> 

<body> 

<h4> 单 元 格 背景 <h4> 

<table border="1"> 

<tr> 
<td bgcolor="red">100000</td> 
<td>200000</td> 

</t> 

<tr> 
<td background="images/1.gif'>200000</td> 
<td>300000</td> 

</t> 

</table> 

</body> 

</html> 


在 正 9.0 中 预览 网 页 效果 如 图 6-10 所 示 。 


国 huserswdminia P ™ © X| 盛 Hserswd 
文件 月 ” 妨 济 (本 乔 (V) 人 二 关 ( 工具 (T) 各 台 (H) 


单元 格 背景 


[2000odl 


Booood| 


图 6-10 为 单元 格 添加 背景 
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6.4 综合 实例 一 一 制作 计算 机 报价 表 


下 面 ， 利 用 本 章 的 表格 知识 ， 制 作 如 图 6-11 所 示 的 计算 机 报价 表 。 


型 号 下 本 国 上 
宏基 (Acer) AS4552-p352332MNCC 笔记 本 | 站 2799 
一 ] 
融和 Dell) 14yR-188 i 本 |f3499| 县 Ds 


呐 想 (Lenovo) G470AH2310R426500P7TCN3(DB)-CN 笔记 本 | 站 4149 -SD 
全 | 


图 6-11 计算 机 报价 表 


吉尔 家 用 (DELL) I560SR-656 


下 
半 


具体 操作 步骤 如 下 。 
0 新 建 HTML 文档 ， 并 对 其 简化 ， 如 下 面 的 代码 所 示 。 


<html> 

<head> 
<title> 完 整 表格 标记 </title> 
</head> 

<body> 

</body> 

</html> 


2 保存 HTML 文件 ， 选 择 相 应 的 保存 位 置 ， 文 件 名 为 “计算 机 报价 表 .html”。 
03j 在 HTML 文档 的 body 部 分 增加 表格 及 内 容 ， 如 下 面 的 代码 所 示 。 


<table> 
<caption> 计 算 机 报价 单 </caption> 
<tr> 
<th> 型 号 </th> 
<th> 类 型 </th> 
<th> 价 格 </th> 
<th> 图 片 </th> 
</t> 
<tr> 
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<td> 宏 幕 (Acer) AS4552-P362G32MNCC</td> 

<td> 笔 记 本 </td> 

<td>¥2799</td> 

<td><img src="images/Acer.jpg" width="120" height="120"></td> 
</t> 
<tr> 

<td> 戴 尔 (Dell) 14VR-188</td><td> 笔 记 本 </td> 

<td>¥3499</td> 

<td><img src="images/Dell.jpg" width="120" height="120"></td> 
</t> 

<tr> 

<td> 联 想 (Lenovo) G470AH2310W42G500P7CW3(DB)-CN</td> 

<td> 笔 记 本 </td> 

<td>¥4149</td> 

<td><img src="images/Lenovo.jpe" width="120" height="120"></td> 
</t> 
<t> 

<td> 戴 尔 家 用 (DELL) I560SR-656</td> 

<td> 台 式 </td> 

<td>¥3599</td> 

<td><img src="images/DellT.jpg" width="120" height="120"></td> 
</t> 

</table> 


利用 caption 标记 制作 表格 的 标题 ，<th> 代 蔡 <td> 作 为 标题 行 单元 格 。 可 以 将 图 片 放 在 单 
元 格 内 ， 即 在 <td> 标 记 内 使 用 <img> 标 记 。 


4 在 HIML 文档 的 head 部 分 ， 增 加 CSS 样式 ， 为 表格 增加 边框 及 相应 的 修饰 ， 代 码 
如 下 。 


<style> 

table{ 
/表格 增加 线 宽 为 3 的 杰 色 实 线 边框 */ 
border:3px solid #E60; 

} 

caption{ 
必 表 格 标题 字号 36*/ 
font-size:36pX: 

昌 

thtdf{ 
必 表 格 单元 格 〈th、td) 增加 边线 */ 
border:1px solid 十 90: 
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</style> 
tog 保存 网 页 后 ， 即 可 查看 最 终 效果 。 


6.5 ”专家 解 惑 


1. 在 Dreamweaver CS5.5 中 如 何 选择 多 个 单元 格 ? 


答 : 在 Dreamweaver CS5.5 中 选择 单元 格 的 操作 类 似 于 文字 处 理工 具 Word， 按 下 鼠标 左 
键 拖 动 鼠标 ， 经 过 的 单元 格 都 会 被 选中 。 按 下 Ctrl 键 ， 单 击 某 个 单元 格 ， 该 单元 格 将 会 被 选 
中 ， 这些 单元 格 可 以 是 连续 的 ， 也 可 以 是 不 连续 的 。 在 需要 选择 区 域 的 开头 单元 格 中 单 击 ， 按 
下 SHIFT 键 ， 在 区 域 的 末尾 单元 格 中 单 击 ， 开 头 和 结尾 单元 格 组 成 的 区 域内 的 所 有 单 击 格 将 
会 被 选中 。 

2. 表格 除了 显示 数据 ， 还 可 以 进行 布局 ， 为 何不 使 用 表格 进行 布局 ? 


答 : 在 互联 网 刚刚 开始 普及 时 ， 网 页 非常 简单 ， 形 式 也 非常 单调 ， 当 时 美国 设计 师 David 
Siegel 发 明了 使 用 表格 布局 ， 风 靡 全 球 。 在 表格 布局 的 页 面 中 ， 表 格 不 但 需要 显示 内 容 ， 还 要 
控制 页 面 的 外 观 及 显示 位 置 ， 导致 页 面 代码 过 多 , 结构 与 内 容 无 法 分 离 。 这 样 就 给 网 站 的 后 期 
维护 和 很 多 其 他 方面 带 来 了 麻烦 。 

3. 使 用 <thead>、<tbody> 和 <tfoot> 标 记 对 行进 行 分 组 的 意义 何在 ? 


答 : 在 HTML 文档 中 增加 <thead>、<tbody> 和 <tfoot> 标 记 虽 然 从 外 观 上 不 能 看 出 任何 变 
化 ， 但 是 它们 却 使 文档 的 结构 更 加 清晰 。 另 外 ， 还 有 一 个 更 重要 的 意义 ， 即 方便 使 用 CSS 样 
式 对 表格 的 各 个 部 分 进行 修饰 ， 从 而 制作 出 更 炫 的 表格 。 


在 网 页 中 ， 表 单 的 作用 比较 重要 ， 主 要 负责 采集 浏览 者 的 相关 数据 ， 例 如 常见 的 注册 表 、 
调查 表 和 留言 表 等 。 


7.1 表单 简介 


表单 是 页 面 中 用 来 提供 用 户 交 互 的 主要 方法 。 一 个 表单 有 3 个 基本 组 成 部 分 。 


@ 表单 标签 : 这 里 面包 含 了 处 理 表单 数据 所 用 CGI 程序 的 URL 以 及 数据 提交 到 服务 器 

@ 表单 域 : 表单 域 包含 文本 框 、 密 码 框 、 隐 藏 域 、 多 行文 本 框 、 复 选 框 、 单 选 框 、 下 拉 
选择 框 和 文件 上 传 框 等 。 

@ 表单 按钮 : 表单 按钮 包括 提交 按钮 、 复 位 按钮 和 一 般 按 钮 ; 用 于 将 数据 传送 到 服务 器 上 
的 CGI 脚本 或 者 取消 输入 ， 还 可 以 用 表单 按钮 来 控制 其 他 定义 了 处 理 脚 本 的 处 理工 作 。 


在 HTML 中 ， 一 般 将 表单 设计 在 HTML 文档 中 ， 当 用 户 填写 完 信息 后 进行 提交 操作 ， 于 
是 表单 的 内 容 就 从 客户 端的 浏览 器 传送 到 服务 器 上 , 经 过 服务 器 上 程序 处 理 后 , 再 将 用 户 所 需 
信息 传送 回 客户 端的 浏览 器 上 ， 这 样 网 页 就 具有 了 交互 性 。 

在 网 页 中 ， 最 常见 的 表单 形式 主要 包括 文本 框 、 单 选 按钮 、 复 选 框 、 按 钮 、 下 拉 列 表 等 。 
图 7-1 所 示 为 一 个 网 页 应 用 表单 之 后 的 页 面 。 


[+ ST 
Zen mad Eo Hen TR we 


图 7-1 邮箱 注册 页 面 
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7.2 表单 基本 元 素 


表单 元 素 是 能 够 让 用 户 在 表单 中 输入 信息 的 元 素 。 常 见 的 有 文本 框 、 密 码 框 、 下 拉 菜 单 、 
单 选 框 、 复 选 框 等 。 本 章节 主要 讲述 表单 基本 元 素 的 使 用 方法 和 技巧 。 


7.2.1 表单 标签 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 ， 其 标签 为 <form>、</form>。 表 单 的 基本 语 
法 格式 如 下 。 


<form action="url" method="getlpost" enctype="mime"> 
</form> 


其 中 , action=url 指定 处 理 提交 表单 的 格式 , 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮件 地 址 。 
method=get 或 post 指明 提交 表单 的 HTTP 方法 。enctype=mine 指明 用 来 把 表单 提交 给 服务 器 
时 的 互联 网 媒体 形式 。 

表单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 表单 元 素 ， 将 显示 不 同 的 效果 。 

【 例 7.1】 《实例 文件 ，ch07\7.1.html) 


<html> 

<body> 

<form> 

下 面 是 输入 用 户 登录 信息 

<br> 

用 户 名 称 

<input type="text" name="user"> 
<br> 

用 户 密码 

<input type="password" name="password"> 
<br> 

<input type="submit" value=" 登 录 "> 
</form> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 7-2 所 示 ， 可 以 看 到 用 户 登 录 信 息 页 面 。 
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司 HUsersAdminist DP - O x Cr Hi\Users\ 


Ee 瀹 志 (E) 。 喜 在 (V) 。 收 莹 闪 内 工具 (D) 帮助 (H) 


下 面 是 输入 用 户 登录 信息 。 
用 户 名 称 


用 户 密码 
EE 


图 7-2 用 户 登录 窗口 
7.2.2 ”文字 字段 


在 网 页 中 输入 文字 字段 的 方法 主要 有 两 种 , 一 种 是 单行 文本 输入 框 ; 一 种 是 多 行文 本 输入 
框 。 


1. 单行 文本 输入 框 (text) 


文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ， 通 常用 来 填写 单个 字 或 者 简短 的 回答 ， 
例如 用 户 姓 名 和 地 址 等 。 代 码 格 式 如 下 。 


<input type="text" name="..." size="..." maxlength="..." value="..."> 


其 中 ，type="text" 定 义 单行 文本 输入 框 ，name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 准 
确 采 集 ， 必 须 定义 一 个 独一无二 的 名 称 ; size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; 
maxlength 属性 定义 最 多 输入 的 字符 数 ，value 属性 定义 文本 框 的 初始 值 。 

【 例 7.2】 “实例 文件 :ch07\7.2.html) 


<html> 
<head><title> 输 入 用 户 的 姓名 </tile></head> 
<body> 


<form> 

请 输入 您 的 姓名 : 

<input type="text" name="yourname" size="20" maxlength="15"> 
请 输入 您 的 地 址 : 

<input type="text" name="youradr" size="20" maxlength="15"> 
</form> 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 7-3 所 示 ， 可 以 看 到 两 个 单行 文本 输入 框 。 


网 页 表单 的 设计 第 7 党 


图 7-3 单行 文本 输入 框 
2. 多 行文 本 输入 框 〈textarea) 

多 行 输入 框 〈textarea) 主要 用 于 输入 较 长 的 文本 信息 。 代 码 格 式 如 下 。 
<textarea name="..." cols="..." rOWS="..." wrap="..."></textarea > 


其 中 ，name 属性 定义 多 行文 本 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独 一 无 


二 的 名 称 ，cols 属性 定义 多 行文 本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ，rows 属性 定义 多 行文 本 
框 的 高 度 ， 单 位 是 单个 字符 宽度 。wrap 属性 定义 输入 内 容 大 于 文本 域 时 显示 的 方式 。 


【 例 7.3】“ 实 例文 件 :， ch07\7.3.html) 


<html> 
<head><title> 多 行文 本 输入 </title></head> 

<body> 

<form> 

请 输入 您 最 近 的 工作 情况 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit" value=" 提 交 "> 

</form> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 7-4 所 示 ， 可 以 看 到 多 行文 本 输入 框 。 
Ele 


pc 
9 6 -ox|@sFx<=5. 

ROLE HiWUserswdminist ~ O XB sz 

文件 人) ， 坊 等 E) ”至 看 (V) ” 收 宣 替 A) 工具 和 T 都 动作 


请 输入 亿 最 近 的 工作 情况 


7-4 多 行文 本 输入 框 
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7.2.3 ”密码 域 


密码 输入 框 是 一 种 特殊 的 文本 域 , 主要 用 于 输入 一 些 保密 信息 。 当 网 页 浏览 者 输入 文本 时 ， 
显示 的 是 黑 点 或 者 其 他 符号 ， 这 样 就 增加 了 输入 文本 的 安全 性 。 代 码 格 式 如 下 。 


<input type="password" name="..." size="..." maxlength="..."> 


其 中 type="password" 定 义 密码 框 ，name 属性 定义 密码 框 的 名 称 ， 要 保证 唯一 性 ，size 属 
性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 maxlength 属性 定义 最 多 输入 的 字符 数 。 
【 例 7.4】〔 实 例文 件 :， ch07\7.4.html) 


<html> 

<head><title> 输 入 用 户 姓名 和 密码 </title></head> 
<body> 

<form> 

用 户 姓 名 : 

<input type="text" name="yourname"> 

<br> 

登录 密码 : 

<input type="password" name="yourpw"><br> 
</form> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 7-5 所 示 ， 输 入 密码 时 可 以 看 到 密码 以 黑 点 的 形式 显示 。 


(BD 个 HA\UsersAdminist DD - C X | 钨 多 入 月 产 往 各 


文件 (有 ) 媚 问 (E) 下 看 (V) ” 收 蕙 关 (A) 工具 (D) 帮助 (H) 


| 用 户 姓名 ， liule 
登录 密码 ， 。*。 


图 7-5 密码 输入 框 
7.2.4” 单 选 按钮 
单 选 按钮 主要 是 让 网 页 浏览 者 在 一 组 选项 里 选择 一 个 。 代 码 格式 如 下 。 
<input type="radio" name=" " value =" "> 


其 中 type="radio" 定 义 单 选 按 钮 , name 属性 定义 单 选 按钮 的 名 称 ， 单 选 按钮 都 是 以 组 为 单 
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位 使 用 的 ， 在 同一 组 中 的 单 选项 都 必须 使 用 同一 个 名 称 ，value 属性 定义 单 选 按 钮 的 值 ， 在 同 
一 组 中 ， 它 们 的 域 值 必须 是 不 同 的 。 
【 例 7.5】《 实 例文 件 : ch07\7.5.html) 


<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 

<body> 

<form> 

请 选择 您 感 兴趣 的 图 书 类 型 : 

<br> 

<input type="radio" name="book" value = "Bookl"> 网 站 编程 <br> 
<input type="radio" name="book" value = "Book2"> 办 公 软 件 <br> 
<input type="radio" name="book" value = "Book3"> 设 计 软件 <br> 
<input type="radio" name="book" value = "Book4"> 网 络 管理 <br> 
<input type="radio" name="book" value = "Book5"> 黑 客 攻 防 <br> 
</form> 


在 下 9.0 中 浏览 效果 如 图 7-6 所 示 ， 可 以 看 到 5 个 单 选 按钮 ， 用 户 只 能 选择 其 中 一 个 单 选 
按钮 。 


[他 HAuserswdminis P ~ © x 
文件 站” 妨 强 (E) ”查看 (V) 收 芋 交 (A) 工具 (T) 帮 动 (H) 


请 选择 您 感 兴趣 的 图 书 类 型 ， 
网 站 编程 


图 7-6 单 选 按钮 
7.2.5” 复 选 框 


复 选 框 主要 是 让 网 页 浏览 者 在 一 组 选项 里 同时 选择 多 个 选项 ,每 个 复 选 框 都 是 一 个 独立 的 
元 素 ， 都 必须 有 一 个 唯一 的 名 称 。 代 码 格式 如 下 。 


<input type="checkbox" name=" " value =""> 


其 中 type="checkbox" 定 义 复 选 框 ，name 属性 定义 复 选 框 的 名 称 ， 在 同一 组 中 的 复 选 框 都 
必须 用 同一 个 名 称 ; value 属性 定义 复 选 框 的 值 。 
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【 例 7.6】 “实例 文件 :ch07\7.6.html) 


<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 

<form> 


请 选择 您 感 兴趣 的 图 书 类 型 : <br> 

<input type="checkbox" name="book" value = "Bookl"> 网 站 编程 <br> 

<input type="checkbox" name="book" value = "Book2"> 办 公 软 件 <br> 

<input type="checkbox" name="book" value = "Book3"> 设 计 软 件 <br> 

<input type="checkbox" name="book" value = "Book4"> 网 络 管理 <br> 

<input type="checkbox" name="book" value = "Book5" checked> 黑 客 攻 防 <br> 
</form> 

</body> 

</html> 


莉 checked 属性 主要 是 设置 默认 选中 项 。 | 


在 下 9.0 中 浏览 效果 如 图 7-7 所 示 ， 即 可 看 到 5 个 复 选 枉 ， 其 中 【黑客 攻防 】 复 选 框 默认 
被 选中 。 


和 HUserswdminist 岂 ”C X | 大 运 坏 到头 十 的 图 
文件 费 鹿 (E) 。 豆 看 (V) 改 齐 交 (A) 工具 (T) 。 大助 (H) 


请 选择 您 感 兴趣 的 图 书 类 型， 
网 站 编程 


图 7-7 复 选 框 的 效果 
7.2.6 下 拉 菜 单 


使 用 select 元 素 可 创建 单 选 或 多 选 下 拉 菜单 。 
【 例 7.7】 《实例 文件 :ch07\7.7.html) 


<html> 

<body> 

<select> 
<option> 列 表 1</option> 
<option> 列 表 2</option> 
<option> 列 表 3</option> 
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<option> 列 表 4</option> 
</select> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 7-8 所 示 ， 单 击 列表 框 右 侧 的 下 三 角 按钮 ,在 弹出 的 下 拉 列 表 中 


进行 选择 。 
[eS 司 HAUsersAdminist DP - CX | @ user 
文件 (有 ) ” 忽 强 (E) ”可 看 (V) 收藏 闪 (A) 工具 (Tm) 帮助 (H) 
| 7 F 
| | 司 表 | 
| 列表 3 [| 
列表 a “| 
图 7-8 下 拉 菜 单列 表 
7.2.7 ”列表 框 
列表 框 主要 用 于 在 有 限 的 空间 里 设置 多 个 选项 。 列 表 框 既 可 以 用 作 单 选 ,也 可 以 用 作 复 选 。 
代码 格式 如 下 。 


<select name="..." Size= 


"..." multiple> 
‘<option value="..." selected> 


</option> 


</select> 


其 中 size 属性 定义 下 拉 选 择 框 的 行 数 ，name 属性 定义 下 拉 选 择 框 的 名 称 ，multiple 属性 


表示 可 以 多 选 ， 如 果 不 设置 本 属性 ， 
表示 默认 已 经 选择 本 选项 。 
【 例 7.8】 《实例 文件 :ch07\7. 


<html> 


那么 只 能 单 选 ，value 属性 定义 选择 项 的 值 ，selected 属性 


8.html) 


<head><title> 选 择 感 兴趣 的 图 书 </title></head> 


<body> 

<form> 

请 选择 您 感 兴趣 的 图 书 类 型 :<br> 
<select name="fruit" size = "3" multipl 
<option value="Book1"> 网 站 编程 


le> 
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<option value="Book2"> 办 公 软 件 

<option value="Book3"> 设 计 软 件 

<option value="Book4"> 网 络 管理 

<option value="Book5"> 黑 客 攻 防 

</select> 

</form> 

</body> 

</html> 

在 下 9.0 中 浏览 效果 如 图 7-9 所 示 ， 即 可 看 到 列表 选择 框 ， 其 中 显示 为 3 行 选项 ， 用 户 可 
以 按 住 Ctrl 键 ， 选 择 多 个 选项 。 


司 ] HUserswdminist 人 DC X | 夺 运 且 要 尖 十 的 男 
文件 肯 。 将 句 (5) 。 豆 看 (V) 效 芝 闪 (A) 工具 (项 屿 (H) 


请 选择 您 感 兴趣 的 图 书 类 型 ， 
网 站 编程 。 


图 7-9 列表 项 的 效果 
7.2.8 ”普通 按钮 
普通 按钮 用 来 控制 其 他 定义 了 处 理 脚本 的 处 理工 作 。 代 码 格式 如 下 。 
<input type="button" name="..." value="..." onClick=".."> 


其 中 type="button" 定 义 普通 按钮 : name 属性 定义 普通 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 ;onClick 属性 表示 单 击 行为 ， 也 可 以 是 其 他 的 事件 ， 通 过 指定 脚本 函数 来 定义 按钮 
的 行为 。 

【 例 7.9】 实 例文 件 : ch07\7.9.html) 


<html> 

<body> 

<form> 

单 击 下 面 的 按钮 ， 把 文本 框 1 中 的 内 容 复制 到 文本 框 2 中 : 

<br> 

文本 框 1: <input type="text" id="field1" value=" 学 习 HTML 的 技巧 "> 
<br> 

文本 框 2: <input type="text" id="field2"> 
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<br/> 

<input type="button" name"..."value" 单 击 我 "onClick="document.getElementById('field2").value=document. 
getElementById('field1").value"> 

</form> 

</body> 

</html> 

在 正 9.0 中 浏览 效果 如 图 7-10 所 示 ， 单 击 【 单 击 我 】 按 钮 ， 即 可 将 文本 框 1 中 内 容 复 制 
到 文本 框 2 中 。 


ee 
0 a Hvsers administ P - © x | @ Husers 
文件 (有 ] ”编辑 (日 ”前 看 (V) ”收藏 失 (A) ”工具 (T) ”帮助 (H) 


单 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 拷贝 到 文 “ 
本 框 2 中 ， 


文本 框 1: 学 习 8TIL5 的 技巧 
文本 框 2: 学 习 HTIL5 的 技巧 
[至 二 到 


图 7-10 单 击 按钮 后 的 复制 效果 
7.2.9 提交 按钮 
提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 代 码 格式 如 下 。 
<input type="submit" name="..." value=".."> 


其 中 type="submit" 定 义 提交 按钮 ; name 属性 定义 提交 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 。 通 过 提交 按钮 可 以 将 表单 里 的 信息 提交 给 表单 里 action 所 指向 的 文件 。 
【 例 7.10】 《实例 文件 ，ch07\7.10.html) 


<html> 

<head><title> 输 入 用 户 名 信息 </tile></head> 
<body> 

<form action="http://www.yinhangit.com/yonghu.asp" method="get"> 
请 输入 你 的 姓名 : 

<input type="text" name="yourname"> 

<br> 

请 输入 你 的 住址 : 

<input type="text" name="youradr"> 

<br> 

请 输入 你 的 单位 : 

<input type="text" name="yourcom"> 

<br> 
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请 输入 你 的 联系 方式 : 

<input type="text" name="yourcom"> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 7-11 所 示 ， 输 入 内 容 后 单 击 【 提 交 】 按 钮 ， 即 可 实现 将 表单 中 
的 数据 发 送 到 制定 的 文件 。 


[5 关 HAusersAdminist P - d X || 展区 入 用 产 扣 


文件 (月 痊 弓 (E) ”各 看 V) ”收藏 夫 (A) 工具 (D) 帮助 (H) 
| ^ 


| 请 输入 你 的 姓名 
| 请 输入 你 的 住址 ， 
请 输入 你 的 单位 ， 
请 输入 你 的 联系 方式 


上 EE 到 


图 7-11 提交 按钮 
7.2.10” 重 置 按钮 
重 置 按钮 用 来 重 置 表单 中 输入 的 信息 。 代 码 格式 如 下 。 
<input type="reset" name="..." value=".."> 


其 中 type="reset" 定 义 重 置 按钮 ，name 属性 定义 重 置 按钮 的 名 称 ，value 属性 定义 按钮 的 
显示 文字 。 
【 例 7.11】 “实例 文件 ，ch07\7.11.html) 


<html> 

<body> 

<form> 

请 输入 用 户 名 称 : 

<input type='text> 

<br/> 

请 输入 用 户 密码 : 

<input type='password> 

<br> 

<input type="submit" value=" 登 录 "> 
<input type="reset" value=" 重 置 "> 
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</form> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 7-12 所 示 ， 输 入 内 容 后 单 击 【 重 置 】 按 钮 ， 即 可 实现 将 表单 中 
的 数据 清空 的 目的 。 


全 SG 写 ] HNUserswAdminist DPD CX |s Hi\Users\ 


文件 (| 帝 误 (6 。 豆 者 (V) ” 收 这 突入 工具 (T) 帮助 (H) 


请 输入 用 户 名 称 ， 


请 输入 用 户 密码 : 
ED 


图 7-12 重 置 按钮 
7.3 ”综合 实战 一 一 制作 淘宝 注册 页 


本 实例 中 ， 将 使 用 一 个 表单 内 的 各 种 元 素来 开发 网 站 的 简单 用 户 意 见 反馈 页 面 。 
具体 操作 步骤 如 下 。 


反馈 表单 非常 简单 , 通常 包含 3 个 部 分 , 需要 在 页 面 上 方 给 出 标题 , 标题 下 方 是 正文 部 分 ， 
即 表 单元 素 ， 最 下 方 是 表单 元 素 提 交 按 钮 。 在 设计 这 个 页 面 时 ， 需 要 把 “用 户 注册 ”标题 设置 
成 HI 大 小 ， 正 文 使 用 p 来 限制 表单 元 素 。 


to3 构建 HTML 页面， 实现 表单 内 容 。 


<html> 

<head> 

<title> 淘 宝 注册 页 面 </title> 

</head> 

<body> 

<hl align=center> 淘 宝 注册 页 面 </h1> 

<form method="post" > 

<p> 姓 &nbsp:&nbsp:&nbsp:&nbsp: 名 : 

<input type="text" class=txt size="12" maxlength="20" name="username" /> 
</p><p> 性 &nbsp:&nbsp:&nbsp:&nbsp: 别 : 
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<input type="radio" value="male" /> 男 

<input type="radio" value="female" /> 女 
</p><p> 年 &nbsp:&nbsp:&nbsp:&nbsp: 龄 : 
<input type="text" class=txt name="age” /> 
<p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮 件 : 

<input type="text" class=txt name="email" /> 
</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address" /> 
<p> 

xp 

请 输入 您 对 网 站 的 建议 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit" name="submit" value=" 提 交 "/> 
<input type="reset" name="reset" value=" 清 除 " /> 
</p> 

</form> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 7-13 所 示 ， 可 以 看 到 创建 了 一 个 用 户 反馈 表单 ， 包 含 标题 “ 淘 


宝 注册 页 面 ”、“ 姓 名 ”、 


“性 别 ”、“ 年 龄 ”、“ 联 系 电话 ”、“ 电 子 邮 件 ”、 


输入 框 和 “提交 ”、“ 清 除 ” 按 钮 。 


全 | HAuserswdminist DD ~ CX | 车 下 三 注 凡 K 醒 
文件 痊 瀑 各 看 W) 收 训 (A) 工具 (T) 才 屿 (H) 


淘宝 注册 页 面 


联系 地 址 ， 
请 输入 您 对 网 站 的 建议 


EE 加 


图 7-13 淘宝 注册 页 面 


“联系 地 址 ” 
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7.4 ”专家 解 惑 


1. 如 何在 表单 中 实现 文件 上 传 框 ? 


在 HTML 语言 中 ,使 用 file 属性 实现 文件 上 传 框 。 语 法 格式 为 :<input type="file" name="..…" 
size="”“" maxlength=" ">。 其 中 fype="file" 定 义 为 文件 上 传 框 ，name 属性 为 文件 上 传 框 的 名 
称 ，size 属性 定义 文件 上 传 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; maxlength 属性 定义 最 多 输入 的 
字符 数 。 文 件 上 传 框 的 显示 效果 如 图 7-14 所 示 。 


[sje 区 
CD wenvnoderc p- ox |G cuservinod 


文件 (有 ] ” 蝙 缉 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


GK. ] 


图 7-14 文件 上 传 框 
2. 制作 的 单 选 框 为 什么 可 以 同时 选中 多 个 ? 


此 时 用 户 需 要 检查 单 选 框 的 名 称 , 要 保证 同一 组 中 的 单 选 框 名 称 相同 , 这 样 才能 保证 单 选 
框 只 能 同时 选中 其 中 一 个 。 


第 8 章 


< 使 用 HTML 创 建 框 架 > 


框架 通常 用 来 定义 页 面 的 导航 区 域 和 内 容 区 域 , 使 用 框架 最 常见 的 情况 就 是 一 个 框架 显示 
包含 导航 栏 的 文档 , 而 另 一 个 框架 显示 包含 内 容 的 文档 。 框 架 是 网 页 中 最 常用 的 页 面 设计 方式 ， 
很 多 网 站 都 使 用 了 框架 技术 。 


8.1 窗口 框架 简介 


框架 的 最 主要 功能 是 用 来 “分 割 ”页 面 窗口 ， 使 每 个 “小 窗口 ”能 显示 不 同 的 HTML 文 
件 ， 这 样 的 页 面 结构 就 称 为 框架 结构 的 页 面 ， 而 这 些 “ 小 窗口 ”就 称 为 框架 的 “窗口 ”。 


8.1.1 什么 是 框架 


框架 主要 用 于 在 一 个 浏览 器 窗口 中 显示 多 个 HTML 文档 内 容 ， 通 过 构建 这 些 文档 之 间 的 
相互 关系 , 实现 文档 导航 、 浏 览 以 及 操作 等 目的 。 框架 可 以 显示 与 浏览 器 窗口 其 余部 分 中 显示 
内 容 无 关 的 HTML 文档 。 

框架 网 页 有 以 下 几 个 优点 。 


@ 可 以 很 好 地 保持 网 站 风格 的 统一 。 由 于 框架 页 面 中 导航 的 部 分 是 同一 个 网 页 ， 因 此 整 
体 风格 统一 。 

@ 便于 浏览 者 访问 。 框 架 网 页 中 导航 部 分 是 固定 的 ， 不 需要 滚动 条 ， 便 于 浏览 者 访问 阅 
读 。 

@ 可 以 提高 网 页 的 制作 效率 。 可 以 把 每 个 网 页 都 用 到 的 公共 内 容 制作 成 单独 的 网 页 ， 作 
为 框架 网 页 的 一 个 框架 页 面 ， 这 样 ， 就 不 需要 在 每 个 页 面 中 重新 输入 这 个 公共 部 分 的 
内 容 了 ， 可 以 节省 时 间 ， 提 高 效率 。 

@ 可 以 方便 更 新 、 维 护 网 站 。 在 更 新 网 站 时 ， 只 需 修 改 公共 部 分 的 框架 内 容 ， 使 用 这 个 
框架 内 容 的 文档 会 自动 更 新 ， 就 能 完成 整个 网 站 的 更 新 修改 。 


回 框架 在 网 站 的 首页 面 中 比较 常见 。 在 一 个 页 面 中 ， 可 以 使 用 框架 的 庶 套 来 实现 网 
页 设计 中 的 多 种 需求 。 对 框架 还 可 以 设置 边框 的 颜色 ， 可 随意 地 设置 框架 的 链接 
| 和 跳 转 功能 ， 还 可 以 设置 框架 的 行为 ， 从 而 制作 出 更 复杂 的 页 面 。 
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8.1.2 ”框架 的 基本 结构 


框架 主要 包含 两 个 部 分 ， 一 个 是 框架 集 ， 另 一 个 是 具体 的 框架 文件 。 

框架 集 主要 用 来 定义 HTML 文件 为 框架 模式 ， 并 设 定 视 窗 如 何 分 割 文件 。 通 俗 一 点 说 ， 
框架 集 就 是 存放 框架 结构 的 文件 , 也 是 访问 框架 文件 的 入 口 文件 。 如 果 网 页 由 左右 两 个 框架 组 
成 ， 那 么 除了 左右 两 个 网 页 文件 之 外 ， 还 有 一 个 总 的 框架 集 文 件 。 

框架 是 页 面 中 定义 的 每 一 个 显示 区 域 , 也 可 以 说 一 个 窗口 就 是 一 个 框架 。 框架 页 面 中 最 基 
本 的 内 容 就 是 框架 集 文件 ， 它 是 整个 框架 页 面 的 导航 文件 ， 其 基本 语法 如 下 。 

<html> 

<head> 

<title> 框 架 页 面 的 标题 </title> 


</html> 


从 上 面 的 语法 结构 可 以 看 到 ， 在 使 用 框架 的 页 面 中 ，<body> 主 体 标记 被 框架 标记 
<frameset> 所 代替 。 而 对 于 框架 页 面 中 包含 的 每 一 个 框架 ， 都 是 通过 <frame> 标 记 来 定义 的 。 


添加 包含 一 段 文本 的 <noframes> 标 签 ， 就 必须 将 这 段 文字 谈 套 于 <body></body> 标 


本 不 能 将 <body></body> 标 签 与 <frameset></frameset> 标 签 同时 使 用 ! 不 过 ， 如 果 要 
| 签 内 。 


8.2 设置 框架 集 的 基本 属性 
在 了 解 了 什么 是 窗口 框架 之 后 , 下 面 就 来 介绍 如 何 设置 框架 集 的 基本 属性 , 如 分 割 框架 窗 
口 的 方式 、 设 置 框架 边框 的 宽度 和 颜色 等 。 
8.2.1 水 平分 割 窗口 


水 平分 割 窗口 是 将 页 面 沿 水 平方 向 切割 , 也 就 是 将 页 面 分 成 上 下 排列 的 多 个 窗口 。 其 语法 
结构 如 下 。 


<frameset rows=" 框 架 窗口 的 高 度 ,框架 窗口 的 高 度 .……" > 
<frame> 
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在 上 述 语 法 中 ，rows 中 可 以 取 多 个 值 ， 每 个 值 表示 一 个 框架 窗口 的 水 平 宽度 ， 它 的 单位 


可 以 是 像素 ， 也 可 以 是 占 浏览 器 的 百分比 。 


注意 : 一 般 设 定 了 几 个 rows 的 值 , 就 需要 有 几 个 框架 , 即 需要 有 相应 数量 的 <frame> 参 数 。 
【 例 8.1】“〈 实 例文 件 : ch08\8.1.html) 


<html> 

<head> 

<title> 水 平分 割 窗口 </title> 

</head> 

<frameset rows="30%,40%,30%"> 
<frame> 


运行 代码 ， 可 以 看 到 页 面 被 分 割 成 上 下 3 个 窗口 ， 其 效果 如 图 8-1 所 示 。 当 浏览 器 大 小 变 


化 时 ， 框 架 也 会 随 之 等 比例 缩放 。 


站 HAusersAdmiis P " © X | 佘 x 呈 SaBD 


文件 (月 六 吉 (E) 。 坦 看 (V) 收藏 闪 (A) 工具 (T) 帮助 (H) 


图 8-1 水 平分 割 窗口 


8.2.2 ”垂直 分 割 窗口 


垂直 分 割 窗 口 就 是 将 页 面 沿 垂直 方向 分 割 成 多 个 窗口 ,也 就 是 将 页 面 分 成 左右 排列 的 多 个 


窗口 。 其 语法 结构 如 下 。 


<frameset cols=" 框 架 窗 口 的 宽度 .框架 窗口 的 宽度 .……"> 
<frame> 
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在 上 述 语法 中 ，cols 中 可 以 取 多 个 值 ， 每 个 值 表示 一 个 框架 窗口 的 水 平 宽度 ， 它 的 单位 可 
以 是 像素 ， 也 可 以 是 占 浏览 器 的 百分比 。 与 水 平分 割 窗口 相同 ， 一 般 设 定 了 几 个 cols 的 值 ， 
就 需要 有 几 个 框架 ， 也 就 是 有 几 个 <frame> 参 数 。 

【 例 8.2】〔 实 例文 件 : ch08\8.2.html) 


<html> 
<head> 
<title> 垂 直 分 割 窗 口 </title> 
</head> 
<frameset cols="25%,50%,25%"> 
<frame> 
<frame> 
<frame> 


</html> 


运行 代码 ， 可 以 看 到 页 面 被 分 割 成 左右 三 个 窗口 ， 效 果 如 图 8-2 所 示 。 当 浏览 器 大 小 变化 
时 ， 框 架 也 会 随 之 等 比例 缩放 。 


3 HAUsersAdminist 局 =- © x 


文件 (有 ” 编 强 (E) ”可 看 (V) 收藏 夫 (A) ”工具 (T) 帮助 (H) 


图 8-2 ”垂直 分 割 窗 口 
8.2.3 混合 分 割 窗口 


混合 分 割 窗 口 就 是 在 一 个 页 面 中 ， 既 有 水 平分 割 的 框架 ， 又 有 垂直 分 割 的 框架 。 其 语法 结 
构 如 下 : 


<frameset rows=" 框 架 窗口 的 高 度 , 框 架 窗口 的 高 度 .……"> 
<frame> 

<frameset cols=" 框 架 窗 口 的 宽度 .框架 窗口 的 宽度 .……"> 
<frame> 

<frame> 


当然 ， 也 可 以 先进 行 垂 直 分 割 ， 再 进行 水 平分 割 。 其 语法 结构 如 下 : 


一 在 设置 框架 窗口 时 ， 一 定 要 注意 窗口 大 小 的 设置 与 窗口 个 数 的 统一 。 


【 例 8.3】 《实例 文件 ，ch08\8.3.html) 


由 代码 可 以 看 出 , 首先 将 页 面 水 平分 割 成 上 下 两 个 窗口 , 接着 下 面 的 框架 又 被 垂直 分 割 成 
3 个 窗口 。 因 此 下 面 的 框架 标记 <frame> 被 框架 集 标记 代替 。 运 行程 序 ， 效 果 如 图 8-3 所 示 。 
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一 aa 
CaN a HAUsersAdminist 人 D ~ OX | 屋 温 分 天 诗 吕 


”文件 (月 ” 养 强 (E) ”可 看 (V) 收藏 夫 (A) ”工具 Mm 才 动 (H) 


图 8-3 混合 分 割 窗 口 


8.2.4 ”设置 框架 边框 


在 默认 情况 下 ， 框 架 窗口 的 四 周 有 一 条 边框 线 ， 通 过 frameborder 属性 可 以 调整 边框 线 的 
显示 情况 。 语 法 结构 如 下 。 


<frame frameborder="value"> 


在 frame 中 设置 则 只 对 当前 框架 有 效 。 


frameborder 的 取 值 只 能 为 0 或 1。 如 果 value 取 值 为 0， 那么 边框 线 将 会 被 隐藏 ; 
如 果 value 取 值 为 1， 边框 线 将 会 显示 。 在 frameset 中 设置 将 会 对 整个 框架 有 效 ， 


【 例 8.4】 《实例 文件 :ch08\8.4.html) 


<html> 
<head> 
<title> 设 置 框架 边框 </title> 
</head> 
<frameset rows="20%,55%.,25%"> 
<frame frameborder="1"> 
<frameset cols="35%.65%" frameborder="0"> 
<frame> 
<frame> 
</frameset> 


运行 这 段 代码 ,可 以 看 到 页 面 中 的 部 分 边框 被 隐藏 ， 如 图 8-4 所 示 


。 当 鼠标 移动 到 窗口 中 
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间 时 会 变 成 光 ， 按 下 鼠标 就 会 看 到 隐藏 的 边框 ， 如 图 8-5 所 示 。 


js ist D - OX | 全 Esc 人 


图 8-4 隐藏 框架 的 边框 图 8-5 按 下 鼠标 的 效果 
8.2.5 设置 框架 的 边框 宽度 


框架 的 边框 宽度 在 默认 情况 下 是 1 个 像素 , 通过 参数 framespacing 可 以 调整 其 大 小 。 其 语 
法 结构 如 下 : 


<frameset framespacing=" 边 框 宽度 "> 


边框 宽度 就 是 在 页 面 中 各 个 边框 之 间 的 线条 宽度 ,以 像素 为 单位 。 这 一 参数 只 能 对 框架 集 
使 用 ， 对 单个 框架 无 效 。 
【 例 8.5】“〈 实 例文 件 :ch08\8.5.html) 


<html> 
<head> 
<title> 设 置 框架 的 边框 宽度 </title> 
</head> 
<frameset rows="30%,70%" framespacine="10"> 
<frame> 
<frameset cols="20%,55%,25%" framespacing="20"> 
<frame> 
<frame> 
<frame> 
</frameset> 
</frameset> 
</html> 


运行 这 段 程序 之 后 的 显示 效果 如 图 8-6 所 示 。 
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图 8-6 设置 框架 的 边框 宽度 
8.2.6 设置 框架 的 边框 颜色 
使 用 参数 bordercolor 可 以 设置 框架 集 的 边框 颜色 。 其 语法 结构 如 下 。 


<frameset bordercolor=" 颜 色 代 码 "> 


国 该 参数 只 对 整个 框架 集 有 效 ， 对 于 单个 框架 无 效 。 


【 例 8.6】“〈 实 例文 件 ， ch08\8.6.html) 


<html> 
<head> 
<title> 设 置 框架 的 边框 颜色 </title> 
</head> 
<frameset rows="30%,70%" framespacing="10" bordercolor ="green"> 
<frame> 
<frameset cols="20%.55%,25%" framespacing="20" bordercolor ="red"> 

<frame> 
<frame> 
<frame> 

</frameset> 
</frameset> 
</html> 


运行 这 段 代码 后 ， 可 以 看 到 两 个 框架 集 设置 了 不 同 的 边框 颜色 ， 效 果 如 图 8-7 所 示 。 
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页 


凡 


邦 


国 HAuserswAdminist 人 ~- 0C X | 感 设 于 ER 的 边 人 也 色 。 x 
文件 站。 兰 总 日。 各 看 (V)， 收 交工 具 (]。 帮 动 H) 


图 8-7 ”设置 边框 颜色 


8.3 设置 窗口 属性 


在 框架 结构 的 页 面 中 , 每 一 个 框架 窗口 都 有 一 个 显示 页 面 ， 这 个 页 面 称 为 框架 页 面 。 框 架 


的 属性 设置 都 在 <frame> 标 记 里 进行 。 


8.3.1 页 面 源 文件 


页 面 的 源 文件 包括 多 种 类 型 ， 如 图 片 、 网 页 文件 、 动 画 等 。 框 架 结构 中 的 各 个 页 面 都 是 一 
个 单独 的 文件 ， 而 这 些 文件 是 通过 src 参数 进行 设置 的 。 其 语法 结构 如 下 。 


<frame src=" 页 面 源 文件 地 址 "> 


页 面 文件 是 框架 页 面 的 具体 内 容 所 在 , 对 于 没有 设置 源 文件 的 框架 ， 即 空白 页 面 ， 
是 没有 任何 作用 的 。 页面 的 源 文件 可 以 是 正常 的 HTML 文件 ， 也 可 以 是 一 个 图 片 
或 者 其 他 类 型 的 文件 。 


为 了 说 明 框架 的 参数 效果 ， 下 面 设置 一 个 框架 页 面 的 内 容 。 
【 例 8.7】《〔 实 例文 件 : ch08\8.7.html) 


<html> 

<head> 

<title> 诗 歌 </title> 

</head> 

<body> 

《 沁 园 春 雪 》 

<p> 北 国 风光 ， 千里 冰 封 ， 万 里 雪 飘 。</p> 
<p> 望 长 城内 外 ， 惟 余 医 医大 河上 下 ， 顿 失 滔 滔 。</p> 
<p> 山 舞 银 蛇 ， 原 驰 蜡 象 ， 欲 与 天 公 试 比 高 。</p> 

<p> 须 晴 日 ， 看 红 装 素 训 ， 分 外 妖娆 。</p> 
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<p> 江 山 如 此 多 娇 ， 引 无 数 英雄 竞 折腰 。</p> 

<p> 惜 秦 皇 汉 武 ， 略 输 文采 ; 唐 宗 宋 祖 ， 稍 逊 风骚 。</p> 

<p> 一 代 天 骄 ， 成 吉 思 汗 ， 只 识 弯 弓 射 大 雕 。 俱 往 矣 ， 数 风流 人 物 ， 还 看 今朝 。</p> 
</body> 

</html> 


将 这 一 文件 命名 为 8.7.html， 将 其 保存 在 框架 集 文件 的 同一 目录 下 。 下 面 就 可 以 设置 页 面 
源 文件 了 。 
【 例 8.8】〈 实 例文 件 : ch08\8.8.html) 


<html> 

<head> 

<title> 设 置 页 面 源 文件 </title> 
</head> 

<frameset rows="40%,60%"> 
<frame src=" 图 01.jpg"> 
<frame src="8.7.html"> 
</frameset> 

</html> 


在 正 9.0 中 浏览 效果 如 图 8-8 所 示 。 


ED mer ninist p - cx| 人 aarmaxt 
文件 朋 入 少 人 】 查 看 (V】 改 硬 实 [A)。 工具 (林苑 H) 


《 礼 园 春 * 当 》 

北国 风光 ， 千 里 订 封 ， 万 里 雪 积 。 
望 长 城内 外 ， 惟 余天 天 大 河上 下 ， 顿 失 滔滔 。 
山 短 银 蛇 ， 原 总 蜡 梨 ， 谷 与 天 公 试 比 高 。 

须 晴 日 ， 看 红 装 素 事 ， 分 外 妖娆。 


图 8-8 设置 页 面 源 文件 
8.3.2 设置 页 面 名 称 


页 面 名 称 是 为 了 便于 页 面 的 查找 和 链接 所 提供 的 一 个 属性 。 框 架 的 页 面 名 称 中 不 允许 包含 
特殊 字符 、 连 字符 、 空 格 等 ， 必 须 是 单个 的 单词 或 者 字母 组 合 。 其 语法 结构 如 下 : 


<frame src=" 页 面 文件 地 址 " name=" 页 面 名 称 "> 
【 例 8.9】〔 实 例文 件 : ch08\8.9.html) 


<html> 
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<head> 

<title> 设 置 页 面 名 称 </title> 
</head> 

<frameset rows="40%,60%"> 
<frame src=" 图 01.jpg" name="pic"> 
<frame src="8.7.html" name="text"> 
</frameset> 

</html> 


这 段 代码 分 别 为 上 下 两 个 框架 页 面 命名 为 pic 和 text， 运 行 代码 时 并 不 显示 框架 名 ， 因 此 
这 样 做 不 会 影响 框架 的 显示 效果 。 在 正 9.0 中 浏览 效果 如 图 8-9 所 示 。 


- ox|@ wmas 
IRT) Mar) 


《< 沁 园 春 * 轨 > 

北国 风光 ， 千 里 洒 封 .万 里 雪山 引 
望 长 城内 外 ， 惟 余天 天 ， 大 河上 下 ， 上 顿 失 河 湘 。 

山 舞 银 蛇 ， 原 弛 晴 象 ， 敬 与 天 公 试 比 高 。 

须 晴 日 ， 看 红 茜 素 圳 ,分 外 既 烧 . 


图 8-9 设置 页 面 名 称 
8.3.3 固定 窗口 的 尺寸 


在 具有 框架 的 页 面 中 ， 当 鼠标 拖 动 框架 的 边框 时 , 框架 窗口 的 尺寸 也 会 随 之 变化 。 如 果 不 
希望 窗口 的 大 小 发 生变 化 ， 可 以 用 noresize 参数 来 实现 。 其 语法 结构 如 下 。 


<frame src=" 页 面 文件 地 址 " noresize> 


必 地 | 在 frame 标记 中 添加 noresize 参数 ， 就 表示 框架 窗口 的 尺寸 不 能 改变 。 | 


【 例 8.10】〔 实 例文 件 ， ch08\8.10.html) 


<html> 

<head> 

<title> 固 定 窗口 的 尺寸 </title> 

</head> 

<frameset rows="30%,70%"> 

<frame src=" 图 01.jpg" name="pic" noresize> 
<frame src="8.7.html" name="text"> 
</frameset> 
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</html> 


在 下 9.0 中 浏览 效果 如 图 8-10 所 示 。 将 鼠标 放置 在 框架 边框 上 时 ， 光 标 不 会 变 为 双 箭头 


形状 ， 也 无 法 拖 动 框架 的 边框 。 


《二 时 团 Hhhuserswdminist P - 0 x| 仿 下 EDooFd Ne 
文件 介 。 庙 缠 (E) ”到 看 (V】 ” 妆 二 关内 工具 [Tm 帮助 (H) 
FT 


《< 沁 园 春 二 >》 

北国 风光 ， 千 里 广 封 ， 万 里 雪 昧 。 
望 长 城内 外 ， 惟 余 其 其 ， 大 河上 下 ， 顿 失 滔 洒 。 
山 舞 银 蛇 ， 原 驰 蜡 象 ， 欲 与 天 公 试 比 高 。 

须 晴 日 ， 看 红 装 对 材 ， 分 外 妖娆。 


江山 如 此 多 妍 ， 引 无 数 英 雄 竞 折腰 。 > 
图 8-10 固定 窗口 的 尺寸 


8.3.4 边框 与 页 面 内 容 的 水 平 边 距 


框架 页 面 与 HIML 中 的 表格 一 样 ， 也 可 以 设置 边框 与 页 面 内 容 的 水 平 边 距 。 其 语法 结构 


如 下 。 


<frame src=" 页 面 文件 地 址 " marginwidth=" 水 平 边 距 "> 


际 却 | 水 平 边 距 用 于 设置 页 面 的 左右 边缘 与 框架 边框 的 距离 ， 单 位 是 像素 。 | 


首先 创建 一 个 源 文件 8.11.html。 
【 例 8.11】〔 实 例文 件 ，ch08\8.11.html) 


<html> 

<head> 

<title> 设 置 水 平 边 距 </tile> 

</head> 

<body> 

<br> 

<h3><font color="#009933"> 春 天 里 的 秋天 </font></h3> 

<hr> 

<font color="#009966"><br> 

春天 , 枯黄 的 原野 变 绿 了 。 新 绿 的 叶子 在 枯 枝 上 长 出 来 。 阳光 温柔 地 对 着 每 个 人 微笑 ， 鸟 儿 在 歌唱 飞翔 。 


花 开放 着 ， 红 的 花 ， 白 的 花 ， 紫 的 花 。 星 闪耀 着 ， 红 的 星 ， 绿 的 星 ， 白 的 星 。 蔚 蓝 的 天 ， 自 由 的 风 ， 梦 一 般 
美丽 的 爱情 。 每 个 人 都 有 春天 。 无 论 是 你 ， 或 者 是 我 ， 每 个 人 在 春天 里 都 可 以 有 欢笑 ， 有 爱情 ， 有 陶醉 。 然 
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而 秋天 在 春天 里 哭泣 了 。 


这 一 个 春天 ， 在 迷人 的 南国 的 古城 里 ， 我 送 走 了 我 的 一 段 光阴 。 


秋天 的 雨 落 了 , 但 


是 又 给 春天 的 风 扫 尽 了 。 在 雨 后 的 一 个 晴天 里 ， 我 同 两 个 朋友 走 过 泥 尝 的 道路 。 走 过 石板 的 桥 ， 走 过 田 畔 的 
小 径 ， 去 访问 一 个 南国 的 女性 ， 一 个 我 不 曾 会 过 面 的 疯狂 的 女郎 。 


</fon> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 8-11 所 示 。 


oe 
CaN 全 HAUsers dminist P - 0 X |@ 设 时 x= 这 天 x | 国有 
文件 旧 。 将 吉 E)。 坦 看 V) 收 基 闪 (A) 工具 (T】 帮助 H) 


‖ 春天 里 的 秋天 


春天 ， 枯 黄 的 原野 变 绿 了 。 新 绿 的 叶子 在 枯 枝 上 长 出 来 。 阳 光 


。 定 过 
| 人 南国 的 女性 ， 一 个 我 不 曾 会 过 咎 的 疯狂 的 女 妇 。 


8-11 预览 效果 


下 面 就 可 以 创建 框架 集 代码 了 。 
【 例 8.12】〔 实 例文 件 ，ch08\8.12.html) 


<html> 
<head> 


<title> 设 置 水 平 边 距 </title> 


</head> 


<frameset cols="35%.,65%"> 
<frame src=" 图 02.jpg" name="pic" > 
<frame src="8.11.html" name="text" marginwidth="70"> 


</frameset> 
</html> 


在 正 9.0 中 浏览 效果 如 图 8-12 所 示 ， 可 以 看 到 右 侧 的 框架 页 面 中 ， 文 本 内 容 与 框架 的 边 
框 之 间 设 置 了 很 大 的 空间 ， 从 而 显得 宽松 很 多 。 
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ED 


EDO unannisn o -ox]Ganxras x] Jo 


文件 (F) ” 沪 缠 (E) 坦 看 (V) ”收藏 关 (A) 工 昊 (T) 大 动 (H) 


| 我 可 站 多半 本 

图 8-12 设置 水 平 边 距 的 预览 效果 

8.3.5 ”边框 与 页 面 内 容 的 垂直 边 距 
通过 marginheight 参数 可 以 设置 边框 与 页 面 的 垂直 边 距 。 其 语法 结构 如 下 : 
<frame src=" 页 面 文件 地 址 " marginheight=" 垂 直 边 距 "> 


垂直 边 距 用 来 设置 页 面 的 上 下 边缘 与 框架 边框 的 距离 ， 单 位 是 像素 。 


【 例 8.13】“〈 实 例文 件 ，ch08\8.13.html) 


<html> 

<head> 

<title> 设 置 垂直 边 距 </title> 

</head> 

<frameset cols="35%,65%"> 

<frame src=" 图 02.jpg" name="pic" > 

<frame src="8.11.html" name="text" marginwidth="70" marginheight="90"> 
</frameset> 

</html> 


在 正 9.0 中 浏览 效果 如 图 8-13 所 示 ， 可 以 看 到 右 侧 的 框架 页 面 中 ， 文 本 内 容 与 框架 的 上 


下 边框 之 间 设 置 了 很 大 的 空间 。 
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PO = 
[全 人 HAUserswdministn 月 ~ © X | EE Ee x| 


文件 日 ”并 寺 (5) ”可可 V) 。 收 草 闪 从 ) 工具 (T) 大 动 (H) 


RN 可 
| 


春天 里 的 秋天 


春天 ， 枯 黄 的 原野 变 绿 了 。 
绿 的 叶子 在 枯 枝 上 长 


全 的 花 。 星 闪闪 着 ， 红 的 
旺 ， 绿 的 星 ， 白 的 星 。 前 蓝 


图 8-13 ”设置 垂直 边 距 的 效果 
8.3.6 设置 框架 滚动 条 显示 


默认 情况 下 , 当 页 面 的 内 容 超出 浏览 器 窗口 的 大 小 时 ,页 面 会 自动 添加 滚动 条 以 方便 用 户 
浏览 。 但 如 果 用 户 不 希望 显示 滚动 条 ， 可 以 通过 设置 scrolling 参数 来 实现 。 语 法 结构 如 下 。 


<frame src=" 页 面 源 文件 " scrolling=" 是 否 显示 滚动 条 "> 


scrolling 参数 在 这 里 只 能 取 Yes、No 或 Auto 三 个 值 中 的 一 个 。 其 中 ，Yes 表示 一 
直 显 示 滚 动 条 ， 而 No 则 表示 无 论 什么 情况 都 不 显示 滚动 条 ; Anuto 是 系统 的 默认 
值 ， 它 是 根据 具体 内 容 来 调整 的 ， 也 就 是 说 当 页 面 长 度 超出 浏览 器 窗口 的 范围 时 


| 就 会 自动 显示 滚动 条 。 


【 例 8.14】〔 实 例文 件 ，ch08\8.14.html) 


<html> 

<head> 

<title> 设 置 垂 直 边 距 </title> 

</head> 

<frameset cols="35%.65%"> 

<frame src=" 图 02.jpg" name="pic" scrolling="Yes"> 


<frame src="8.11.html" name="text" marginwidth="70" marginheight="90" scrolling="No"> 


</frameset> 
</html> 


在 正 9.0 中 浏览 效果 如 图 8-14 所 示 , 与 图 8-13 相对 比 , 可 以 看 出 设置 scrolling 为 Yes 时 ， 
即使 页 面 内 容 远 远 小 于 浏览 器 的 大 小 ， 也 会 显示 滚动 条 ; 而 当 scrolling 设置 为 No 时 ， 即 使 内 


容 超 出 了 浏览 器 的 范围 ， 也 没有 显示 滚动 条 。 


es 
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[= < 
(Oe pox Sonamoe Ca 


文件 (有 ] ” 尖 声 (E) 可知 (V) ， 收 这 夫人 以 ) 工具 T) 帮 动 (H} 


春天 里 的 秋天 


春天 ， 相 各 的 要 守 次 健 了 著 


。 无 论 是 你 
每 个 人 在 春 天 里 部 可 以 有 次 
图 8-14 设置 滚动 条 的 效果 


8.3.7 不 支持 框架 标签 


对 于 一 些 低 版 本 的 浏览 器 来 说 ,如 果 不 支持 框架 结构 就 无 法 打开 框架 页 面 , 但 这 样 还 不 够 ， 
因为 它 并 不 清楚 为 什么 打 不 开 页 面 。 通 过 noframe 参数 可 以 设置 一 些 内 容 (包括 文字 或 图 片 ) 
来 告诉 浏览 者 其 浏览 器 无 法 打开 框架 页 面 。 语 法 结构 如 下 。 

<html> 


<head> 
<title> 框 架 页 面 的 标题 </title> 


在 该 语法 中 ，<noframe> 和 </noframe> 标 记 之 间 的 部 分 就 是 在 不 支持 框架 的 浏览 器 
中 所 要 显示 的 内 容 。 可 以 与 <body> 标 记 一 样 在 其 中 添加 内 容 。 


【 例 8.15】〔 实 例文 件 : ch08\8.15.htnl) 


<html> 
<head> 
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<title> 不 支持 框架 页 面 </title> 
</head> 
<frameset cols="35%,65%"> 
<frame src=" 图 02.jpg" name="pic" > 
<frame src="8.11.html" name="text"> 
<noframe> 
<center> 

<p> 对 不 起 ， 您 的 浏览 器 不 支持 框架 页 面 ， 因 此 无 法 显示 此 页 面 ! </p> 
<img src=" 图 03.jpg"> 
</center> 
</noframe> 
</frameset> 


在 正 9.0 中 浏览 效果 如 图 8-15 所 示 ， 当 用 户 的 浏览 器 不 支持 框架 结构 时 ， 就 直接 显示 
<noframe> 标 记 内 的 页 面 内 容 。 


对 不 起 ， 您 的 浏览 器 不 支持 框架 页 面 ， 因 此 无 法 显示 此 页 面 ! 


图 8-15 显示 <noframe> 标 记 内 的 内 容 
8.4 内 联 框架 
内 联 框架 是 一 种 较为 特殊 的 框架 , 它 是 在 浏览 器 窗口 中 嵌 套 子 窗口 , 也 就 是 整个 页 面 并 不 
是 框架 页 面 ， 但 是 却 包 含 一 个 框架 窗口 ， 在 框架 窗口 内 显示 相应 的 页 面 内 容 。 语 法 结构 如 下 : 


<iframe "页 面 源 文件 "> 
</iftame> 


8.4.1 内 联 框架 的 主要 参数 
与 普通 框架 结构 类 似 ， 内 联 框架 也 可 以 设置 很 多 参数 ， 如 表 8-1 所 示 。 
表 8-1 内 联 框架 的 参数 设置 


参数 含义 

STC 内 联 框架 页 面 的 源 文件 地 址 
width 内 联 框架 在 页 面 中 显示 的 宽度 
height 内 联 框架 在 页 面 中 显示 的 高 度 
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( 续 表 ) 
参数 含义 

Align 内 联 框架 页 面 在 浏览 器 中 的 对 齐 方式 ， 可 以 为 左 对 齐 、 右 对 齐 或 居中 对 齐 
name 设 定 框架 页 面 的 名 称 

marginwidth 设置 页 面 与 边框 的 水 平 间距 

marginheight | 设置 页 面 与 边框 的 垂直 间距 


从 表 中 可 以 看 出 ， 很 多 普通 框架 页 面 的 属性 在 内 联 框架 页 面 中 同样 适用 ， 如 name 等 ， 而 
在 普通 框架 中 只 对 框架 集 有 效 的 一 些 参数 在 这 里 同样 可 以 设置 ， 如 frameborder 等 ， 此 外 内 联 
框架 页 面 还 可 以 设置 大 小 和 对 齐 方式 。 而 对 于 内 联 框 架 来 说 , 框架 边框 的 宽度 和 颜色 是 无 法 设 
置 的 ， 即 与 普通 框架 相 比 ， 内 联 框架 中 不 包含 framespacing 和 bordercolor 参数 。 

本 节 将 主要 通过 设置 框架 页 面 的 参数 和 不 设置 进行 对 比 ， 从 而 清晰 地 说 明 各 个 参数 的 功 
能 。 为 了 达到 这 一 目的 ， 需 要 进行 如 下 的 准备 工作 : 创建 两 个 普通 的 HTML 页 面 ， 其 中 一 个 
作为 内 联 框架 的 载体 ， 命 名 为 float.html; 另 一 个 作为 内 联 框架 页 面 的 源 文件 ， 命 名 为 
source.html。float.html 文件 的 源 代码 如 下 : 

【 例 8.16】〔 实 例文 件 ，ch08\float.html) 


<html> 

<head> 

<title> 未 添加 内 联 框架 的 页 面 </title> 

</head> 

<body> 

<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 内 联 框 架 页 面 </font> 
<hr size=2> 

</body> 

</html> 


在 IE 9.0 中 浏览 效果 如 图 8-16 所 示 。 


全 司 HAuserswdminis P - © x | © Fron » 
文件 (月 ” 沪 强 (E) ”各 看 (V】 收 京 交 (A) ”工具 (T) 大 彻 (H) 
在 这 一 个 页 面 中 将 会 添加 一 个 内 联 框架 
页 面 


图 8-16 未 添加 内 联 框 架 的 页 面 
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Source.html 文件 的 源 代码 如 下 。 
【 例 8.17】 《实例 文件 : ch08\source html) 


<html> 

<head> 

<title> 内 联 框架 的 页 面 内 容 </title> 

</head> 

<body> 

<font size="5" color="#000099"> 泰 坦 尼克 号 </font><br><br> 

<image src=" 图 04.jpg" align="left"> 

《泰坦 尼克 号 》 作 为 电影 史上 三 大 凄美 不 朽 爱情 影片 之 一 ， 是 一 部 荡气回肠 的 爱情 经 典 之 作 ， 具 有 甚 高 
的 催泪 效果 。<br> 

《泰坦 尼克 号 》 是 一 部 风靡 全 球 的 美国 爱情 故事 片 ， 也 是 西方 电影 在 东方 获得 成 功 的 经 典 。<br> 

<hr> 

剧情 介绍 ; <br> 

该 影片 向 众人 讲述 了 一 段 动人 的 爱情 故事 : 在 泰坦 尼克 号 上 的 罗 丝 因 不 想 嫁 给 未 婚 夫 卡尔 ， 准 备 跳 海 自 
杀 ， 被 幸运 赢得 船 票 的 杰克 所 救 ， 两 人 由 此 认识 。 在 随后 的 几 天 里 ， 杰 克 带 她 参加 三 等 舱 的 舞会 ， 给 她 画素 
描 《〈 布 洛克 打捞 起 的 那 张 ) ， 教 她 吐 痰 …… 他 们 两 人 很 快 险 入 了 情 网 。 但 是 这 份 甜美 的 爱情 还 没 过 多 久 ， 泰 
坦 尼克 号 便 撞 上 冰山 了 。 杰 克 为 了 罗 丝 能 够 存活 下 来 ， 不 断 地 鼓励 她 ， 而 自己 却 冻 死 在 寒冷 的 海水 里 。 罗 丝 
得 救 了 ， 但 她 从 没有 忘记 杰克 ， 不 仅仅 是 因为 他 们 有 一 段 凄美 的 爱情 ， 还 因为 杰克 带 给 了 她 欢乐 ， 也 给 了 她 
希望 和 未 来 。 

</body> 

</html> 


在 IE 9.0 中 浏览 效果 如 图 8-17 所 示 。 


| 


| 泰坦 尼克 号 


， 是 一 部 逊 气 回肠 的 爱情 经 典 之 作 ， 具 有 其 


是 一 唐 风 摩 全 球 的 美国 爱情 故事 
影 在 东方 获得 成 功 的 经 典 。 


用 作 办 由 玫 二 上 让 并 不 本 关 全 时 
入 


i 
因为 杰克 带 给 了 她 欢乐 ， 也 给 了 


图 8-17 ”内 联 框架 的 页 面 内 容 
完成 了 两 个 页 面 文件 之 后 ， 下 面 就 可 以 开始 设置 内 联 框架 页 面 的 内 容 了 。 
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8.4.2 ”必需 参数 : 页 面 源 文件 


内 联 框架 中 最 基本 的 参数 就 是 src， 它 用 来 设置 内 联 框架 页 面 的 源 文件 地 址 ， 也 是 内 联 杠 
架 页 面 必需 的 参数 。 语 法 结构 如 下 : 


<iframe src=" 页 面 源 文件 "> 


下 面 将 文件 source.html 作为 内 联 框架 页 面 的 源 文件 插入 到 HIML 文件 float.html 中 。 
【 例 8.18】 “实例 文件 : ch08\8.18.html) 


<html> 

<head> 
<title> 页 面 源 文件 </title> 
</head> 

<body> 

<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 内 联 框架 页 面 </font> 
<hr size=2> 

<iframe src="source.html"> 
</iframe> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 8-18 所 示 。 


(3 半 HAUsersAdminist -CX 车 K 可 源 文件 


文件 (站 ” 蝙 强 {E)】 各 看 (V) 。 必 茂 突 (A) 工具 (T) 帮助 (H) 


在 这 一 个 页 面 中 将 会 添加 一 个 内 联 框架 页 
加 


泰坦 尼克 号 
《来 
坦 尼 
Eg. 名 
2 7 .A 作为 
图 8-18 页 面 源 文件 


8.4.3 ”特有 属性 : 框架 大 小 


内 联 框架 特有 的 参数 主要 包括 框架 的 页 面 大 小 以 及 对 齐 方式 。 在 普通 框架 结构 中 , 由 于 框 
架 就 是 整个 浏览 器 窗口 , 因此 不 需要 设置 其 大 小 .但 是 在 浮动 框架 中 ,框架 是 插入 到 普通 HTML 
页 面 中 的 ， 所 以 可 以 调整 整个 框架 的 大 小 。 语 法 结构 如 下 : 


<iframe src=" 浮 动 框架 页 面 源 文件 " width=" 页 面 宽 度 " height=" 页 面 高 度 "> 
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图 在 该 语法 中 ， 页 面 的 宽度 和 高 度 值 都 以 像素 为 单位 。 | 


下 面 在 float.html 文件 的 基础 上 设置 浮动 框架 页 面 的 大 小 。 
【 例 8.19】 实例 文件 :ch08\8.19.html) 


<html> 

<head> 

<title> 设 置 框架 页 面 的 大 小 </tile> 

</head> 

<body> 

<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 
<hr size=2> 

<iframe src="source.html" width="550" height="310"> 
</iframe> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 8-19 所 示 。 与 图 8-18 相对 比 ， 可 以 看 到 页 面 中 的 框架 大 小 被 调 
整 得 更 加 协调 。 


CD [Dennis p -cx| Saassrmex 


文件 (月 ” 激 纺 (至 看 (V) 收 荐 关 (A) 工具 (Tm) 琐 动 (H) 


在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 


泰坦 尼克 号 


图 8-19 设置 框架 页 面 的 大 小 
8.4.4 特有 属性 : 对 齐 方式 


除了 设置 框架 大 小 的 参数 之 外 , 设置 框架 的 对 齐 方式 也 是 浮动 框架 页 面 所 特有 的 参数 。 其 
语法 结构 如 下 。 


<iframe src=" 浮 动 框架 页 面 源 文件 " align=" 对 齐 方式 "> 
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加 在 该 语法 中 ， 对 齐 方式 用 来 设置 浮动 框架 页 面相 对 于 浏览 器 窗口 的 水 平 位 置 。 


可 以 取 的 值 包括 左 对 齐 (left) 、 右 对 齐 (right) 和 居中 对 齐 (center) 。 


下 面 在 float.html 文件 的 基础 上 设置 浮动 框架 页 面 的 对 齐 方式 。 
【 例 8.20】 《实例 文件 :ch08\8.20.html) 


<html> 

<head> 

<title> 设 置 对 齐 方式 </title> 

</head> 

<body> 

<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 
<hr size=2> 

<iframe src="source.html" width="550" height="310" align="center"> 

</iframe> 


在 正 9.0 中 浏览 效果 如 图 8-20 所 示 。 与 图 8-19 相对 比 ， 可 以 看 到 页 面 中 的 框架 位 置 被 调 
整 了 ， 由 原来 的 左 对 齐 变 成 了 居中 对 齐 。 


-A 
[SS 加 HAUsersAdministraton\Do PD ~ © x | © A 
文件 (有) ”六 名 (E) 。 王 看 (/) ”收藏 实 (A) 工具 (帮助 (H) 


在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 


5 时 
经 典 有 其 高 的 
a 关 秦 志 尼 兄 号 银 是 一 部 风 
情 故 事 片 ， 也 是 方 电影 
的 经 典 。 
Re 加 情 介 
T Tm N 1 C 
后 


= 


便 撞 上 
来 ,不 断 地 霹 励 她 ， 而 自己 六 宇宙 提 术 时 罗兰 得 救 了 


8-20 ”设置 框架 页 面 的 对 齐 方式 


8.4.5 ”共有 参数 设置 


普通 框架 页 面 和 内 联 框架 页 面 所 共有 的 一 些 参数 称 为 内 联 框 架 的 基本 属性 , 主要 包括 src、 
name、marginwidth、marginheight 和 scrolling。 由 于 这 些 参 数 的 设置 方法 与 普通 框架 类 似 ， 这 


年 


里 不 再 袭 述 。 具 体 的 语法 结构 如 下 。 


119 ”| 
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<iframe 浮动 框架 页 面 源 文件 " name=" 页 面 名 称 " marginwidth=" 边 框 与 页 面 的 水 平 距离 " 
marginheight=" 边 框 与 页 面 的 垂直 距离 " scrolling=" 是 否 显示 滚动 条 "> 
</iframe> 


在 这 里 ， 这 些 参数 的 取 值 范围 与 普通 框架 相同 ， 因 此 不 再 重复 ， 只 通过 下 面 的 实 
l 例 说 明 这 些 属 性 的 设置 效果 。 


【 例 8.21】〔 实 例文 件 ，ch08\8.21.html) 


<html> 

<head> 

<title> 设 置 框 架 的 共有 参数 </title> 

</head> 

<body> 

<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 

<hr size=2> 

<iframe src="source.html" width="550" height="310" align="center” name="public" marginwidth="60" 
marginheight="40" scrolling="No"> 

</iframe> 


</html> 


在 正 9.0 中 浏览 效果 如 图 8-21 所 示 。 对 比 图 8-20， 可 以 看 到 框架 页 面 的 内 容 与 边框 增加 
了 一 定 的 空间 ， 而 且 在 页 面 中 虽然 无 法 显示 全 部 的 内 容 ， 但 是 并 没有 出 现 滚动 条 。 
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8-21 设置 框架 页 面 的 共同 参数 
8.4.6 ”其 他 参数 
在 内 联 框架 页 面 中 ， 还 有 另外 一 个 特殊 的 参数 可 以 设置 ， 即 框架 边框 显示 属性 
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frameborder。 在 普通 框架 中 ， 该 参数 既 对 整个 框架 集 有 效 ， 也 对 单个 框架 有 效 。 同 样 地 ， 在 内 
联 框架 中 也 可 以 设置 这 一 参数 。 语 法 结构 如 下 : 


<iframe 浮动 框架 页 面 源 文件 " frameborder=" 是 否 显 示 "> 
</iframe> 


区 在 这 里 ,这 些 参 数 的 取 值 范围 与 普通 框架 相同 .其 中 src 是 浮动 框架 的 页 面 源 文件 ; 
I frameborder 只 能 取 0 或 1，0 表示 不 显示 边框 ，1 为 默认 取 值 ， 表 示 显 示 边框 。 


【 例 8.22】〔 实 例文 件 ，ch08\8.22.html) 


<html> 

<head> 

<title> 设 置 框架 页 面 的 边框 </title> 

</head> 

<body> 

<font size="5" color="#CC0000"> 在 这 一 个 页 面 中 将 会 添加 一 个 浮动 框架 页 面 </font> 

<hr size=2> 

<iframe src="source.html" width="550" height="310" align="center” name="public" marginwidth="60" 
marginheight="40" scrolling="No" frameborder="0"> 

</iframe> 

</body> 

</html> 


在 耻 9.0 中 浏览 效果 如 图 8-22 所 示 。 对比 图 8-20, 可 以 看 到 浮动 框架 的 页 面 边 框 不 见 了 。 
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8.5 ”框架 与 链接 


大 部 分 情况 下 , 在 页 面 中 添加 框架 是 为 了 更 好 地 对 页 面 内 容 进行 导航 , 因此 常常 是 通过 框 
架 来 链接 不 同 的 内 容 。 对 于 框架 页 面 来 说 ,设置 页 面 的 链接 需要 使 用 target 参数 ， 这 一 参数 的 
取 值 不 同 于 它 在 普通 HTML 页 面 中 的 取 值 。 


8.5.1 设置 普通 框架 结构 的 链接 


普通 的 框架 结构 之 间 通 过 target 参数 互相 链接 起 来 。 一 般 情况 下 ， 一 个 页 面 中 会 有 一 个 杠 
架 窗口 作为 导航 页 面 ， 里 面 添 加 了 对 另外 一 个 框架 的 内 容 的 链接 设置 ， 而 这 些 链 接 则 是 通过 
target 实现 的 。 

下 面 通 过 一 个 具体 的 实例 来 讲解 关于 框架 之 间 的 链接 方法 。 首 先 需要 设 定 一 个 框架 集 文 
件 ， 用 于 确定 框架 页 面 的 整体 布局 ， 这 里 将 文件 命名 为 “民间 传说 .html”。 

【 例 8.23】 “实例 文件 :ch08\ 民 间 传 说 .html) 


<html> 

<head> 

<title> 框 架 页 面 的 整体 结构 </title> 

</head> 

<frameset rows="200,*"> 

<frame src="navig.html" name="navig" > 
<frame src="content-1.html" name="content"> 
</frameset> 

</html> 


此 处 按照 常见 网 站 的 上 下 结构 进行 布局 , 将 页 面 上 面 的 框架 窗口 设置 为 200 像素 高 , 下 面 
的 窗口 则 分 割 剩 下 的 部 分 。 在 该 文件 中 , 设置 了 上 面 的 框架 窗口 页 面 为 导航 页 面 , 命名 为 navig， 
同时 设置 其 默认 打开 的 页 面 名 为 navig.html。 同 时 还 设置 该 页 面 窗 口 不 显示 滚动 条 ， 而 且 不 允 
许 调 整 窗口 大 小 。 在 该 文件 中 还 设置 了 下 面 的 框架 窗口 为 内 容 页 面 ， 命 名 为 content， 设 置 默 
认 打 开 的 页 面 名 为 content-1.html。 

下 面 就 介绍 这 两 个 文件 的 具体 编码 。 其 中 ，navig.html 文件 将 放置 在 框架 的 上 方 ， 作 为 页 
面 的 导航 页 。 

【 例 8.24】 《实例 文件 :ch08\navig.html) 


<html> 
<head> 
<title> 导 航 页 面 </title> 
</head> 
<body> 
<center> 
<img src=" 图 05.jpg"><br><br> 
<a href="content-1.html" target="content"> 白 蛇 传 </a> 
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&nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: 
<a href="content-2.html" target="content"> 神 笔 马 良 </a> 
&nbsp: &nbsp; &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: 
<a hre 人 "content-3.html" target="content"> 菊 花 仙 子 </a> 
</center> 
</body> 
</html> 


在 这 个 文件 代码 中 , target 的 值 是 设置 将 要 显示 页 面 内 容 的 框架 名 称 , 此 处 设置 为 content， 
说 明 设置 的 这 3 个 内 容 页 面 将 在 content 框架 窗口 中 显示 。 
content-1.html 文件 是 默认 的 内 容 页 面 ， 其 代码 如 下 。 
【 例 8.25】 “实例 文件 : ch08\content-1.html) 


<html> 

<head> 

<title> 内 容 页 面 </title> 

</head> 

<body> 

<center> 

<font size=5> 白 蛇 传 </font><br><br> 

</center> 

&nbsp; &nbsp; &nbsp: 清 明 时 分 , 西湖 岸 边 花红 柳 绿 , 断 桥 上 面 游人 如 梭 , 真是 一 幅 春光 明媚 的 美丽 画面 。 
突然 ， 从 西湖 底 悄悄 升 上 来 两 个 如 花 似 玉 的 姑娘 ， 怎 么 回 事 ? 人 怎么 会 从 水 里 出 来 呢 ? 原来 ， 她 们 是 两 条 修 
炼 成 了 人 形 的 蛇 精 ， 虽 然 如 此 ， 但 她 们 并 无 害 人 之 心 ， 只 因 羡 幕 世间 的 多 彩 人 生 ， 才 一 个 化 名 叫 白 素 贞 ， 一 
个 化 名 叫 小 青 ， 来 到 西湖 边 游玩 。<br> 

&nbsp: &nbsp: &nbsp: 偏 偏 老天爷 忽然 发 起 脾气 来 ， 云 时 间 下 起 了 倾盆 大 雨 ， 白素贞 和 人 小 青 被 淋 得 无 处 藏 
身 ， 正 发 悉 呢 ， 突 然 只 觉 头 项 多 了 一 把 伞 ， 转 身 一 看 ， 只 见 一 位 温文 尔 雅 、 白 净 秀 气 的 年 轻 书生 撑 着 伞 在 为 
她 们 遮 雨 。 白 素 贞 和 这 小 书生 四 目 相交 ， 都 不 约 而 同 地 红 了 红脸 ， 相 互 产 生 了 爱慕 之 情 。 小 青 看 在 眼 里 ， 忙 
说 : “多 谢 ! 请 问 客 官 尊 姓 大 名 。” 那 小 书生 道 : “我 叫 许仙 ， 就 住 在 这 断 桥 边 。” 白 素 贞 和 小 青 也 赶忙 做 
了 自我 介绍 。 从 此 ， 他 们 三 人 常常 见面 ， 白 素 贞 和 许仙 的 感情 越 来 越 好 ， 过 了 不 久 ， 他 们 就 结 为 夫妻 ， 并 开 
了 一 间 “ 保 和 堂 ”药店 ， 小 日 子 过 得 可 美 了 ! <br> 

&nbsp: &nbsp; &nbsp: 由 于 “ 保 和 堂 ” 治 好 了 很 多 很 多 疑难 病症 ， 而 且 给 穷人 看 病 配 药 还 分 文 不 收 ， 所 以 
药店 的 生意 越 来 越 红火 ， 远 近来 找 白素贞 治 病 的 人 越 来 越 多 ， 人 们 将 白素贞 亲切 地 称 为 白 娘子 。 可 是 ，“ 保 
和 党 ”的 兴隆 、 许 仙 和 白 娘子 的 幸福 生活 却 惹恼 了 一 个 人 ， 谁 呢 ? 那 就 是 金山 寺 的 法 海 和 尚 。 因 为 人 们 的 病 
都 被 白 娘子 治 好 了 ， 到 金山 寺 烧 香 求 立 萨 的 人 就 少 多 了 ， 香 火 不 旺 ， 法 海 和 尚 自然 就 高 兴 不 起 来 了 。 这 天 ， 
他 又 来 到 “ 保 和 堂 ”前 ， 看 到 白 娘 子 正在 给 人 治 病 ， 不 禁 心 内 妒 火 中 烧 ， 再 定 睛 一 瞧 ， 哎 呀 ! 原来 这 白 娘子 
不 是 凡人 ， 而 是 条 白蛇 变 的 ! <br> 

&nbsp: &nbsp; &nbsp; 法 海员 有 点 小 法 术 , 但 他 的 心术 却 不 正 。 看 出 了 白 娘 子 的 身份 后 ,他 就 想 拆散 许仙 
和 白 娘子 夫妇 、 搞 垮 “ 保 和 堂 ”。 于 是 ， 他 偷偷 把 许仙 叫 到 寺中 ， 对 他 说 : “你 娘子 是 蛇 精 变 的 ， 你 快 点 和 她 
分 手 吧 ， 不 然 ， 她 会 吃 掉 你 的 ! ”许仙 一 听 ， 非 常 气愤 ， 他 想 : 我 娘子 心地 善良 ， 对 我 的 情意 比 海 还 深 。 就 
算 她 是 蛇 精 ， 也 不 会 害 我 ， 何 况 她 如 今 已 有 了 身孕 ， 我 怎 能 离弃 她 呢 ! 法 海 见 许仙 不 上 他 的 当 ， 恼 羞 成 怒 ， 
便 把 许仙 关 在 了 寺 里 。<br> 


精 殉 HTML-+CSS 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


&nbsp: &nbsp; &nbsp: 在 “ 保 和 堂 ”里 ， 白 娘子 正 焦急 地 等 待 许仙 回来 。 一 天 、 两 天 ， 左 等 、 右 等 ， 白 娘 
子 心急 如 焚 。 终 于 打听 到 原来 许仙 被 金山 寺 的 法 海 和 尚 给 “ 留 ” 住 了 ， 白 娘子 赶紧 带 着 小 青 来 到 金山 寺 ， 苦 
苦 哀求 ， 请 法 海 放 回 许 仙 。 法 海 见 了 白 娘 子 ， 一 阵 冷 笑 ， 说 道 : “大 胆 妖 蛇 ， 我 劝 你 还 是 快 点 离开 人 间 ， 否 
则 别 怪我 不 客气 了 ! ”和 白 娘子 见 法 海 拒 不 放 人 ， 无 奈 ， 只 得 拔 下 头 上 的 金色 ， 迎 风 一 摇 ， 掀 起 滔滔 大 浪 ， 向 
金山 寺 直 逼 过 去 。 法 海 眼见 水 漫 金 山寺 ， 连 忙 脱 下 架 效 ， 变 成 一 道 长 堤 ， 拦 在 寺 门 外 。 大 水 涨 一 尺 ， 长 堤 就 
高 一 尺 ， 大 水 涨 一 丈 ， 长 旭 就 高 一 丈 ， 任 赁 波浪 再 大 ， 也 漫 不 过 去 。 再 加 上 白 娘子 有 孕 在 身 ， 实 在 斗 不 过 法 
海 ， 后 来 ， 法 海 使 出 欺诈 的 手法 ， 将 白 娘 子 收 进 金 钵 ， 压 在 了 雷 峰 塔下 ， 把 许仙 和 白 娘子 这 对 恩爱 夫妻 活 生 
生地 拆散 了 。<br> 

&nbsp: &nbsp: &nbsp: 小 青 逃 离 金山 寺 后 ， 数 十 载 深山 练功 ， 最 终 打 败 了 法 海 ， 将 他 逼 进 了 螃蟹 腹 中 ， 救 
出 了 白 娘 子 ， 从 此 ， 她 和 许仙 以 及 他 们 的 孩子 幸福 地 生活 在 一 起 ， 再 也 不 分 离 了 。 

</body> 

</html> 


用 同样 的 方法 添加 另外 两 个 内 容 页 面 ， 分 别 命名 为 content-2.html 和 content-3.html， 有 具体 
的 代码 参见 代码 包 中 相对 应 的 文件 夹 。 
完成 这 几 个 文件 之 后 ， 打 开 框 架 集 页 面 ， 效 果 如 图 8-23 所 示 。 
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清明 时 分 ， 西 湖岸 边 花红 柳 绿 ， 断 桥 上 面 游 人 如 覆 ， 真 是 一 幅 春 光明 媚 的 美 
丽 画 面 。 突 然 ， 从 西湖 底 悄 悄 升 上 来 两 个 如 花 似 玉 的 姑娘 ， 六 人 人 怎么 会 
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图 8-23 ”框架 集 页面 


单 击 页 面 中 的 链接 文字 “ 神 笔 马良 ”， 会 在 框架 的 下 方 页 面 中 显示 content-2.html 文件 的 
， 如 图 8-24 所 示 。 

单 击 页 面 中 的 链接 文字 “菊花 仙子 ”， 会 在 框架 的 下 方 页 面 中 显示 content-3.html 文件 的 
， 如 图 8-25 所 示 。 这 就 说 明 ， 在 框架 集中 实现 了 各 个 窗口 页 面 之 间 的 链接 。 
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图 8-24 链接 到 content-2 页 面 
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8-25 ”链接 到 content-3 页 面 


8.5.2 ”内 联 框 架 与 链接 


在 内 联 框架 中 同样 也 可 以 制作 页 面 之 间 的 链接 , 其 方法 与 普通 框架 类 似 , 下 面 依然 通过 实 
例 来 说 明 。 内 联 框架 所 在 的 主页 面 命 名 为 Hoatl.html， 代 码 如 下 。 
【 例 8.26】 《实例 文件 :ch0gloatl .html) 


<html> 
<head> 
<title> 内 联 框架 窗口 的 链接 </title> 
</head> 


<body> 
‘<center> 
<img src=" 图 05.jpe"><br><br> 
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<a href-"content-1.html" target="content"> 白 蛇 传 </a> 
&nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: 
<a href="content-2.html" target="content"> 神 笔 马 良 </a> 
&nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: &nbsp: 
<a href="content-3.html" target="content"> 菊 花 仙 子 </a> 
<br><br> 
</center> 
<iframe src="content-1.html" name="content" width="500" height="170" align="center"> 
</iframe> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 8-26 所 示 。 


| [sss 
| Hser WadmirisrotonpD: P ~ EE ~ 
取 件 月 六 沁 (重生 NV】 忆 硬 FIA， 工商 才 芭 Hl 


白蛇 传 加 
清明 时 分 ， 西 湖 府 边 花 红柳 绿 ， 断 括 上 面 游人 如 覆 ， 直 是 一 
人 突然 ， 从 西 情理 玉 两 站 四 信 供 
要 过 和 天 和 和 从 上 


8-26 ”内 联 框架 窗口 的 主页 面 


单 击 其 中 的 链接 文字 “菊花 仙子 ”， 可 以 在 下 面 的 内 联 框架 页 面 中 打开 content-3.html 文 
件 的 内 容 ， 如 图 8-27 所 示 。 由 此 可 见 ， 实例 中 成 功 地 实现 了 内 联 框架 窗口 的 链接 。 


[ET 
Ee | bwueenwdmirinraonpe P - © x | 人 sree css "| 
Eo 


菊花 仙子 自 
很 早 以 前 ， 太 云 河 边 住 着 一 个 叫 阿 牛 的 农民 、 阿 牛 家 旦 很 
穷 ， 他 七 岁 就 没 了 父亲 , 和 织 度 日 。 阿 千 号 亲 办 子 幼 垃 


去， 国光 a 
失 他 对 母亲 妈妈 A 好 ， 今 

后 TE 我 已 经 长 大 ， 我 能 养活 你 ! “ 

| 去 张 财主 家 做 小 长 工 _ 母子 俩 兰 度 光 沪 。 两 年 后 ， a 加 


图 8-27 链接 content-3.html 文件 的 效果 
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8.6 专家 解 惑 


1. 如 何 避 免 别人 把 自己 的 网 页 放 在 其 框架 中 


一 些 网 页 设计 者 往往 喜欢 偷窃 别人 的 劳动 成 果 , 比如 把 别人 精心 制作 的 网 页 ， 以 子 页 的 形 
式 放 到 自己 的 框架 中 。 为 了 尽量 避免 自己 的 网 页 内 容 被 “盗用 ”， 可 在 网 页 源 代码 的 
<head></head> 之 间 加 入 如 下 代码 内 容 。 


<script language="javascript"><!-- 
if (self!=top) {top.location=self.location:} 
->< /script> 


将 上 述 代 码 加 入 之 后 ， 就 可 以 有 效 保护 自己 的 网 页 不 被 别人 放 到 框架 中 使 用 。 
2. 如 何 优化 网 页 布局 框架 ? 


框架 结构 或 称 帧 结构 (Frame) 网 页 表现 为 一 个 网 页 内 的 某 一 块 保持 固定 ， 其 他 部 分 信息 
可 以 通过 滚动 条 上 下 或 左右 移动 显示 。 框架 型 网 页 的 另 一 个 表现 是 , 深层 页 面 的 域名 通常 不 会 
在 URL 中 体现 出 来 ， 即 使 进入 深层 子 页 面 ， 浏 览 器 显示 出 来 的 URL 仍 是 主页 的 URL。 

框架 结构 的 好 处 是 : 页 面 整体 一 致 ， 更 新 方便 。 但 大 多 搜索 引擎 无 法 识别 框架 ,也 没 兴趣 
抓 取 其 中 内 容 。 某 些 浏览 器 不 支持 框架 页 面 。 

如 果 要 使 用 框架 ， 必 须 在 代码 中 使 用 Noframes 标签 进行 优化 ， 把 Noframe 标签 看 作 一 个 
普通 文本 内 容 的 主页 。 在 <Noframe></Noframe> 区 域 中 包含 指向 frame 页 的 链接 以 及 带 有 关键 
词 的 描述 文本 。 同 时 在 框架 以 外 的 区 域 也 出 现 关键 词 文本 。 这 样 搜索 引擎 才能 正确 索引 到 框架 
内 信息 。 

还 有 一 个 办 法 是 采用 过 ame 即 内 联 框 架 (Inner Frame) 技术 来 避免 Frame 带 来 的 不 便 。 
所 谓 这 ame 也 是 框架 的 一 种 形式 ， 它 是 相当 于 在 主 浏览 器 窗口 内 婴 一 个 子 窗口 ， 内 容 自 动 打 
开 。Iframe 可 以 嵌 在 网 页 中 的 任意 部 分 ， 也 可 以 随意 定义 其 大 小 ， 其 代码 显示 为 : 


<iframe src=xx width=x height=x scrolling=xx frameborder=x></frame> 


对 搜索 引擎 来 说 ， 过 ame 中 的 文字 是 可 见 的 ， 也 可 以 跟踪 到 其 中 链接 指向 的 页 面 ， 不 过 
与 用 户 所 见 不 同 的 是 ， 搜 索引 擎 将 过 ame 内 容 看 成 单独 的 一 个 网 面 内 容 ， 与 被 内 嵌 的 页 面 无 
关 。 


第 9 章 
< 网 页 多 媒体 的 设计 > 


多 媒体 是 一 个 网 站 的 必 备 元 素 ， 使 用 它 可 以 丰富 网 站 内 容 ， 吸 引用 户 的 注意 ， 突 出 重点 。 
通常 多 媒体 元 素 包括 声音 和 动画 两 部 分 。 


9.1 添加 动态 文字 


网 页 的 多 媒体 元 素 一 般 包括 动态 文字 、 动 态 图 像 、 声 音 以 及 动画 等 ， 其 中 最 简单 的 就 是 添 
加 一 些 滚动 文字 。 
9.1.1 设置 滚动 文字 

使 用 marquee 标记 可 以 将 文字 设置 为 动态 滚动 的 效果 。 其 语法 结构 如 下 。 


<marquee> 滚 动 文字 </marquee> 


强 只 要 在 标记 之 间 添加 要 进行 滚动 的 文字 即 可 ， Eee 
的 字体 、 颜 色 等 ， 


C 


【 例 9.1】 《实例 文件 :ch09\9.1.html) 


<html> 

<head> 

<title> 设 置 深 动 文字 </title> 

</head> 

<body> 

<marquee> 

<font face=" 隶 书 " color="#CC0000 " size=4> 你 好 ， 欢 迎 光 临 五 月 茧 薇 女 裤 专卖 店 !: 这 里 有 最 适合 你 的 打 底 
裤 ， 这 里 有 最 让 你 满意 的 服务 </font> 

</marquee> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 9-1 所 示 。 可 以 看 到 设置 为 红色 素 书 的 文字 从 浏览 器 的 右 方 缓 组 
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向 左 滚动 。 


司 Habeerswdmirist D - O xB 理 Ra 文字 
RM SR SEV SERN TR Wm 


1 这 里 有 最 适合 你 的 打 


9-1 设置 滚动 文字 
9.1.2 设置 文字 的 滚动 方向 


在 网 页 中 除了 可 以 添加 滚动 的 文字 外 , 还 可 以 设置 文字 的 滚动 方向 , 默认 情况 下 文字 只 能 
从 右 向 左 滚动 ， 而 在 实际 应 用 中 常常 需要 不 同 滚动 方向 的 文字 ， 这 时 就 可 以 通过 direction 参 
数 来 设置 。 语 法 结构 如 下 。 


<marquee direction= "滚动 方向 "> 滚动 文字 </marquee> 


际 却 | 该 语法 中 的 滚动 方向 可 以 包含 4 个 取 值 ， 分 别 为 up、down、left 和 right， 它 们 分 
别 表示 文字 向 上 、 向 下 、 向 左 和 向 右 滚动 ， 其 中 向 左 滚动 left 的 效果 与 默认 效果 
\ 相同 ， 而 向 上 滚动 的 文字 则 常常 出 现在 网 站 的 公告 栏 中 。 


【 例 9.2】 “实例 文件 :ch09\9.2.html) 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee direction="up"> 

<font color="#3300FF" face=" 楷 体 GB2312"> 
清明 时 节 雨 纷纷 <br> 

路 上 行人 欲 断 魂 <br> 

借 问 酒家 何 处 有 <br> 

牧童 遥 指 杏 花村 <br> 

</font> 

</marquee> 

<marquee direction="down"> 

<font color="#FF0000" face=" 楷 体 GB2312"> 
清明 时 节 雨 纷纷 <br> 

路 上 行人 和 欲 断 魂 <br> 
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借 问 酒家 何 处 有 <br> 
牧童 遥 指 杏 花村 <br> 


在 正 9.0 中 浏览 效果 如 图 9-2 和 图 9-3 所 示 。 可 以 看 到 文字 不 同 的 滚动 效果 ， 图 中 两 段 文 

字 的 感觉 就 像 是 从 中 间 被 拉扯 开 -一样 。 
| 
这 误 上 二 看， 二 (A 工具 [| 得 看 (V) ”次 基 突 (A) ”工具 (T) ”帮助 (H) 
清明 时 节 雨 纷纷 

路 上 行人 欲 断 魂 

借 问 酒家 何 处 有 

牧童 通 指 可 花村 


文件 (站 总 (E 豆 看 WV) 收 汞 闪 A) 工具 (项 屿 (H) 


清明 时 节 雨 纷纷 
跨 上 行人 欲 断 魂 
借 问 酒家 何 处 有 


清明 时 节 雨 纷纷 
路 上 行人 欲 断 现 
他 这 体外 有 
牧童 吉 指 可 花村 


牧童 般 指 杏 花村 


图 9-2 ”设置 滚动 方向 图 9-3 运行 一 段 时 间 的 效果 


县 却 | 如 果 将 文字 方向 相反 设置 ,也 就 是 上 面 一 段 文字 的 direction 设置 为 down， 下 面 一 | 


v 段 设置 为 up， 运行 结果 就 似乎 是 两 组 文字 融合 到 一 起 。 


下 面 设 置 文字 的 左右 移动 效果 。 
【 例 9.3】 (实例 文件 : ch09\9.3.html) 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee direction=left> 啦 啦 啦 ， 我 从 右 向 左 移 ! </marquee> <P> 
<marquee direction=right> 啦 啦 啦 ， 我 从 左 向 右 移 ! </marquee></font> 


</body> 
</html> 


在 正 8.0 中 浏览 效果 如 图 9-4 所 示 。 
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aS 各 HAUserswdminist DD ~ 0 X | 大 设 梧 滚动 文字 


文件 (F) ” 编 强 {E) ”青春 (V) ”收藏 夫 (A) ”工具 (MT) 帮助 (H) 


啦 啦 啦 ， 我 从 右 向 左 移 ! 
啦 啦 啦 ， 我 从 左 向 右 移 ! 


图 9-4 设置 文字 左右 移动 的 效果 
9.1.3 设置 文字 的 滚动 方式 
除了 将 文字 设置 为 单方 向 的 滚动 外 , 还 可 以 为 文字 设置 滚动 方式 ， 如 往复 滚动 等 。 这 一 功 
能 可 以 通过 添加 behavior 属性 来 实现 。 语 法 结构 如 下 。 
<marquee behavior= "滚动 方式 "> 滚动 文字 </marquee> 
滚动 方式 behavior 的 取 值 如 表 9-1 所 示 。 
表 9-1 behavior 的 取 值 及 效果 


滚动 的 效果 
| sl | 件 环 党 动 , 默认 效果 


EE 
来 交行 


【 例 9.4】 《实例 文件 :ch09\9.4.html) 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

marquee behavior=scroll> 啦 啦 啦 ， 我 一 圈 一 圈 绕 着 走 ! </marquee> <P> 
<marquee behavior=slide> 啦 啦 啦 ， 我 只 走 一 次 就 区 了 ! </marquee> <P> 
<marquee behavior=alternate> 啦 啦 啦 ， 我 来 回 走 耶 ! </marquee> 
</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 9-5 所 示 。 其 中 第 一 行文 字 不 停 地 循环 滚动 显示 ; 第 二 行文 字 则 
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在 第 一 次 到 达 浏览 器 边缘 时 就 停止 了 滚动 ;最 后 一 行文 字 则 在 滚动 到 浏览 器 左边 缘 后 开始 反方 
向 运动 。 
| (DD 刁 HNUsersAdminist D = OX | ES 
“文件 (| 绽 声 (E) ” 豆 埋 V) ” 收 训 夫 (A) 工具 TT 间 动 (H) 
啦 啦 啦 ， 我 一 圈 一 圈 绕 着 走 ! 
啦 啦 啦 ， 我 只 走 一 次 就 软 了 1! 
啦 啦 啦 ， 我 来 回 走 耶 ! 


i 训 本 | 一文 一 
En 本 滞 


图 9-5 ”设置 滚动 方式 
9.1.4 设置 文字 的 滚动 循环 次 数 


设置 滚动 文字 后 ,在 默认 情况 下 会 不 断 地 循环 下 去 ， 如 果 希 望 文字 滚动 几 次 后 停止 ， 可 以 
使 用 loop 参数 来 进行 设置 。 语 法 结构 如 下 : 


<marquee loop=" 循 环 次 数 "> 滚动 文字 </marquee> 
【 例 9.5】《〔 实 例文 件 : ch09\9.5.html) 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee loop=3 behavior=scroll> 啦 啦 啦 ， 我 只 走 3 趟 哟 ! </marquee> <P> 
<marquee loop=3 behavior=slide> 啦 啦 啦 ， 我 只 走 3 趟 哟 ! </marquee> <P> 
<marquee loop=3 behavior=alternate> 啦 啦 啦 ， 我 只 走 3 趟 哟 ! </marquee> 
</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 9-6 所 示 。 可 以 看 到 第 一 行文 字 滚动 3 个 循环 之 后 ， 滚 动 文字 将 
不 再 出 现 ， 第 二 行 与 第 三 行文 字 ， 在 滚动 3 个 循环 之 后 ， 文 字 将 停留 在 窗口 中 。 


EE 
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-OIC 
攻 一 辐 | 国 口 厨 | ，X. 


人 人 日 HAUsersAdminist P =- O x] @ aasaxz| 


”文件 (有 ”六 强 (E) 。 坦 看 (V) ”收藏 闪 (A) ”工具 (T) 帮助 (H) 


| 啦 咯 啦 ， 我 只 走 3 直 哟 | 


啦 啦 啦 ， 我 只 走 3 趟 哟 |! 


图 9-6 设置 滚动 的 循环 次 数 
9.1.5 设置 文字 的 滚动 速度 


在 设置 滚动 文字 时 ， 有 时 候 希 望 文字 的 滚动 速度 快 些 ， 有 时 则 希望 慢 些 ， 这 就 需要 使 用 
scrollamount 参数 来 实现 。 语 法 结构 如 下 。 


<marquee scrollamount= 滚 动 速度 ></marquee> 


茵 在 该 语法 中 ， 滚 动 文 字 的 速度 实际 上 是 设置 滚动 文字 每 次 移动 的 长 度 ， 以 像素 为 | 
单位 。 
人 


【 例 9.6】 “实例 文件 :ch09\9.6.html) 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee scrollamount=3> 哎 呀 呀 ， 我 走 的 好 慢 啊 ! </marquee><br><br> 
<marquee scrollamount=10> 哎 呀 呀 ， 我 不 慌 不 忙 地 走 啊 ! </marquee><br><br> 
<marquee scrollamount=50> 哎 呀 呀 ， 我 走 的 好 快 哦 ! </marquee> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 9-7 所 示 。 可 以 看 到 3 行文 字 同 时 开始 滚动 , 但 速度 是 不 一 样 的 ， 
设置 的 scrollamount 值 越 大 ， 速 度 也 就 越 快 。 
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上 wweewannep-cx| | 


文件 (月 ” 编 强 (E) ”二 看 (V) ” 收 营 夫 ( 凡 工具 (D) 帮助 (H) 


哎呀 呀 ， 我 走 的 好 慢 啊 ! 
哎呀 是， 我 不 慌 不 忙 地 走 啊 ! 


哎呀 咱 ， 我 走 的 好 快 哦 ! 


图 9-7 设置 文字 滚动 速度 
9.1.6 设置 文字 滚动 的 时 间 间 隔 
scrolldelay 参数 可 以 设置 滚动 文字 滚动 的 时 间 间隔 。 语 法 结构 如 下 。 
<marquee scrolldelay= 时 间 间 隔 ></marquee> 


长 scrolldelay 的 时 间 间 隔 单位 是 毫秒 , 也 就 是 千 分 之 一 秒 。 这 一 时 间 间 隔 的 设置 为 滚 
动 两 步 之 间 的 时 间 间 隔 ， 如 果 设 置 的 时 间 比较 长 ， 会 产生 走 走 停 停 的 效果 。 如 果 
L 与 滚动 速度 scrollamount 参数 结合 使 用 ， 效 果 会 更 明显 。 


【 例 9.7】 《实例 文件 ，ch09\9.7.html) 


<html> 
<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee scrollamount=10 scrolldelay =5> 看 我 不 停 脚 步 地 走 ! </marquee><br><br> 
<marquee scrollamount=10 scrolldelay =100> 看 我 走 走 鞭 歇 ! </marquee><br><br> 
<marquee scrollamount=10 scrolldelay =200> 我 要 走 一 步 停 一 停 </marquee> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 9-8 所 示 。 其 中 第 一 行文 字 设 置 的 延迟 小 , 因此 走 起 来 比较 平滑 ; 
最 后 一 行 设置 的 延迟 比较 大 ， 看 上 去 就 像 是 走 一 步 软 一 会 儿 的 感觉 。 
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A A 天 2 
ee e) H\UsersAdminist D - OC X | @ 设 村 六 3 文字 
文件 (月 ” 锋 强 (E) 。 坦 看 (V) 效 营 交 (A】 工具 和 T) 帮助 (H) 
看 我 不 停 脚步 地 走 ! 
看 我 走 走 软 欢 ! 
要 走 一 步 停 一 停 


图 9-8 设置 文字 滚动 的 时 间 间 隔 
9.1.7 ”设置 滚动 文字 的 背景 


在 网 页 中 , 为 了 突出 某 部 分 内 容 , 常常 使 用 不 同 背 景色 来 显示 。 深 动 文 字 也 可 以 单独 设置 
背景 色 。 语 法 结构 如 下 。 


<marquee bgcolor=-" 颜 色 代 码 "> 滚动 文字 </marquee> 


茵 文字 背景 颜色 设置 为 16 位 颜色 码 。 | 


【 例 9.8】“〈 实 例文 件 :， ch09\9.8.html) 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee behavior ="alternate" bgcolor="#FFFF66"> 
沁 园 春 ， 雪 

</marquee> 

<br><br> 

<marquee direction="up" bgcolor="#99CCFF"> 

北国 风光 ， 千 里 冰 封 ， 万 里 雪 球 。<br> 
望 长 城内 外 ， 惟 余 闫 莽 ， 大 河上 下 ， 顿 失 滔 滔 。<br> 
山 舞 银 蛇 ， 原 驰 蜡 和 象 ， 欲 与 天 公 试 比 高 。<br> 

须 晴 日 ， 看 红 装 素 训 ， 分 外 妖娆 。<br> 
江山 如 此 多 娇 ， 引 无 数 英雄 竞 折腰 。<br> 
惜 秦 皇 汉 武 ， 略 输 文采 ， 唐 宗 宋 祖 ， 稍 逊 风骚 。<br> 
一 代 天 骄 ， 成 吉 思 汗 ， 只 识 弯 弓 射 大 雕 。 俱 往 矣 ， 数 风流 人 物 ， 还 看 今朝 。<br> 
</marquee> 
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</body> 
</html> 


在 焉 9.0 中 浏览 效果 如 图 9-9 所 示 。 可 以 看 到 在 滚动 文字 后 面 设置 了 淡 蓝 色 的 背景 。 


(HO HAUsersAdminist 只 - OX | 爸 设 枉 浓 文 闻 


文件 (F) 。 沁 乌 (5) 至 看 (V) 收 京 实 (A) 工具 站。 帮助 (H) 


沁 园 春 - 雪 


北国 风光 ， 千 里 冰 封 ， 站 
a 


和 大 可 上 1 李 失 党 酒 。 
WORE. 


i 


re ne 入 数 风流 人 物 ， 


图 9-9 设置 滚动 文字 的 背景 色 
9.1.8 设置 滚动 文字 的 背景 面积 


如 果 不 设 置 滚动 文字 的 背景 面积 ， 那 么 默认 情况 下 ,水 平 滚动 的 文字 背景 与 文字 同 高 、 
浏览 器 窗口 同 宽 ， 使 用 width 和 height 参数 可 以 调整 其 水 平和 垂直 的 范围 。 


<marquee width= 背 景 宽度 height= 背 景 高 度 > 滚 动 文 字 </maruquee> 


语法 结构 如 下 。 


与 


图 此 处 设置 宽度 和 高 度 的 单位 均 为 像素 。 


【 例 9.9】〔 实 例文 件 : ch09\9.9.html) 


<html> 

<head> 

<title> 设 置 深 动 文字 </title> 

</head> 

<body> 

<marquee behavior =" alternate" bgcolor="#99CCFF"> 

欢迎 光临 我 的 小 店 

</marquee><br><br> 

<marquee behavior="alternate" bgcolor="#99CCFF" width=500 height=50> 
欢迎 光临 我 的 小 店 


SuloBis 
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在 下 9.0 中 浏览 效果 如 图 9-10 所 示 。 可 以 看 到 两 段 滚动 文字 的 背景 高 度 和 宽度 的 变化 。 


[ 己 已 -| 攻 3 


[SS HAusersAdminist P =- C X | 名 设 本 六 文字 


文件 (月 ”六 强 (E) 。 豆 看 (V) 站 写 闪 (A) 工具 (D) 帮 动 (H) 


图 9-10 设置 滚动 背景 面积 
9.1.9 设置 空白 空间 


默认 情况 下 ， 滚 动 文字 周围 的 文字 或 图 像 是 与 滚动 背景 紧密 连接 的 ， 使 用 参数 hspace 和 
vspace 可 以 设置 它们 之 间 的 空白 空间 。 语 法 结构 如 下 。 


<marquee hspace= 水 平 范围 vspace= 垂 直 范围 > 滚动 文字 </marquee> 


际 示 | 该 语法 中 水 平和 垂直 范围 的 单位 均 为 像素 。 


【 例 9.10】“【〈 实 例文 件 : ch09\9.10.html) 


<html> 

<head> 

<title> 设 置 深 动 文字 </title> 

</head> 

<body> 

不 设置 空白 空间 的 效果 : 

<marquee behavior ="alternate" bgcolor="#9999FF "> 
欢迎 光临 我 的 小 店 

</marquee> 

这 里 有 你 想象 不 到 的 惊喜 ! 

<br> 

<hr color="#FF0000"> 

<br> 

设置 水 平 为 70 像素 、 垂 直 为 50 像素 的 空白 空间 : 
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<marquee behavior ="alternate" bgcolor="#9999FF " hspace=70 vspace=50> 
欢迎 光临 我 的 小 店 


</marquee> 
这 里 有 你 想象 不 到 的 实惠 ! 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 9-11 所 示 。 可 以 看 到 设置 空白 空间 的 效果 。 


[SS rr 


文件 中 编 名 (可 看 (V】 ”收藏 天 (A) 工具 Mm 帮助 (H) 
| 不 设置 空白 空间 的 效果 


外 各 早 


设置 水 平 为 70 像素 、 垂 直 为 50 像素 的 空白 空间 ， 


这 里 有 你 想象 不 到 的 实惠 ! 


图 9-11 设 轩 空 和 空间 
9.2 添加 背景 音乐 


在 HTML 中 ， 除 可 以 添加 动态 滚动 文字 之 外 ， 还 可 以 添加 背景 音乐 。 
9.2.1 设置 背景 音乐 


在 网 页 中 ， 除 可 以 嵌入 普通 的 声音 文件 之 外 ,还 可 以 为 某 个 网 页 设置 背景 音乐 。 作 为 背景 
音乐 的 可 以 是 音乐 文件 ， 也 可 以 是 声音 文件 ， 其 中 最 常用 的 是 midi 文件 。 语 法 结构 如 下 。 


<bgsound src= 背 景 音乐 的 地 址 > 


作为 背景 音乐 的 文件 还 可 以 是 avi 文件 、mp3 文件 等 声音 文件 。 | 


【 例 9.11】 实例 文件 ch09\9.11.html) 


<html> 
<head> 
<title> 设 置 背景 音乐 </title> 
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</head> 

<body> 

<bgsound src="sleep.mp3"> 

<center> 

<font face=" 黑 体 " size=5> 醉 花 阴 </font><br> 

<font size=4> 李 清 照 </font> 

</center> 

<hr width=85% size=3> 
<p>&nbsp;&nbsp;&nbsp;&nbsp: 注 雾 浓 云 愁 永生， 瑞 脑 消 金 曾 。<br> 
&nbsp:;&nbsp;&nbsp;&nbsp: 佳 节 又 重阳 ， 玉 枕 纱 厨 ， 半 夜 凉 初 透 。<br> 
&nbsp:&nbsp:&nbsp:&nbsp: 东 离 把 酒 黄昏 后 ， 有 暗 香 盈 袖 。<br 
&nbsp:&nbsp:&nbsp:&nbsp: 莫 道 不 消 瑰 ， 帘 卷 西风 ， 人 比 黄 花 瘦 。</p> 
<hr size=S> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 9-12 所 示 。 在 打开 界面 之 后 就 可 以 听 到 背景 音乐 。 


LE 


| HUsersAdminist P ~ © X | @ 设 村 让 要 理 寺 


文件 油 句 E) ”查看 (V) ， 收 项 交 (A) 工具 (T) 大 动 (H) 


醉 花 阴 
李 济 照 


薄 寺 浓 云 秋 永 时， 瑞 脑 消 金 兽 。 
佳节 又 重阳 ， EE 半夜 谅 初 透 
休克 扫 时 和 大 车 

莫 道 不 消魂， 和 人 比 黄花 竟 。 


图 9-12 设置 背景 音乐 
9.2.2 设置 背景 音乐 的 循环 播放 次 


通常 情况 下 ， 背 景 音乐 需要 不 断 地 播放 ,但 有 时 也 需要 指定 播放 的 次 数 。 使 用 loop 参数 
可 以 设置 背景 音乐 播放 的 次 数 。 语 法 结构 如 下 。 


<bgsound src= 背 景 音乐 的 地 址 loop= 循 环 次 数 > 


图 如 果 希 望 无 限 次 循环 播放 背景 音乐 ， 可 将 循环 次 数 设置 为 true。 | 


【 例 9.12】 实 例文 件 :， ch09\9.12.html) 


<html> 
<head> 
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<title> 设 置 背景 音乐 </title> 

</head> 

<body> 

<bgsound src="sleep.mid" loop=3> 

<center> 

<font face=" 黑 体 " size=5> 醉 花 阴 </font><br> 

<font size=4> 李 清 照 </font> 

</center> 

<hr width=85% size=3> 
<p>&nbsp;&nbsp:&nbsp;&nbsp: 薄 和 雾 浓 云 愁 永恒 ， 瑞 脑 消 金 兽 。<br> 
&nbsp:&nbsp;&nbsp;&nbsp: 佳 节 又 重阳 ， 玉 枕 纱 厨 ， 半 夜 凉 初 透 。<br> 
&nbsp:&nbsp:&nbsp:&nbsp: 东 离 把 酒 黄昏 后 ， 有 暗 香 盈 袖 。<br> 
&nbsp:&nbsp:&nbsp:&nbsp: 莫 道 不 消 瑰 ， 帘 卷 西 风 ， 人 比 黄 花 瘦 。</p> 
<hr size=5> 

</body> 

</html> 


在 焉 9.0 中 浏览 效果 ， 背 景 音乐 在 循环 播放 3 次 以 后 停止。 
9.3 添加 多 媒体 文件 


使 用 HTML 除了 可 以 为 网 页 添加 动态 文字 、 背 景 音乐 外 ， 还 可 以 添加 一 些 多 媒体 文件 ， 


如 视频 、 动 画 等 。 这 样 ， 可 以 使 单调 的 网 页 变 得 生动 。 
9.3.1 设置 多 媒体 文件 


人 


在 网 页 中 常见 的 多 媒体 文件 包括 声音 文件 和 视频 文件 。 设 置 多 媒体 文件 的 语法 结构 如 下 。 
<embed src=" 多 媒体 文件 地 址 " width= 播 放 界面 的 宽度 height= 播 放 界面 的 高 度 ></embed> 


在 该 语法 中 ，width 和 height 一 定 要 设置 ， 单位 是 像素 ,否则 无 法 正确 显示 播放 多 
媒体 文件 的 软件 。 


【 例 9.13】 实 例文 件 ，ch09\9.13.html) 


<html> 

<head> 

<title> 嵌 入 多 媒体 文件 </title> 

</head> 

<body> 

下 面 是 嵌入 的 多 媒体 文件 : <br> 

<embed src="Wildlife.wmv" width=500 height=200></embed> 
</body> 
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</html> 


在 正 9.0 中 浏览 效果 如 图 9-13 所 示 。 单 击 页 面 中 的 播放 按钮 可 以 播放 插入 的 文件 。 


一 闫 HAUsersAdminist -0X 上 总 坟 多半 Ht 文件 
文件 (有 ”六 汤 (E) ”可 看 V) ”收藏 闪 (A) 工具 (帮助 (H) 


下 面 是 谋 入 的 多 媒体 文件 ， 


图 9-13 添加 多 媒体 文件 
9.3.2 设置 多 媒体 文件 的 自动 运行 


登录 网 页 时 常常 会 看 到 一 些 视频 文件 直接 开始 运行 , 不 需要 手动 播放 , 特别 是 一 些 广告 
容 ， 这 是 通过 autostart 参数 来 实现 的 。 语 法 结构 如 下 : 


<embed src=" 多 媒体 文件 地 址 " autostart= 是 否 自动 运行 ></embed> 


区 autostart 的 取 值 有 两 个 。 一 个 是 true， 表 示 自 动 播放 ; 另 一 个 是 false， 表 示 不 自动 | 
播放 。 
人 


【 例 9.14】 “实例 文件 :ch09\9.14.html) 


<html> 

<head> 

<title> 设 置 自动 运行 </title> 

</head> 

<body> 

下 面 的 视频 文件 中 上 面 的 视频 文件 将 会 自动 播放 ， 而 下 面 的 视频 文件 则 需要 手动 播放 : <br> 
<embed src=" Wildlife.wmv" width=500 height=200 autostart=True></embed> 

<embed src=" Wildlife.wmv" width=500 height=200 autostart=False></embed> 

</body> 

</html> 
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在 正 9.0 中 浏览 效果 如 图 9-14 所 示 。 可 以 看 到 两 个 视频 文件 的 不 同 效果 。 


十 


M 频 文件 将 会 自动 播放 ， 而 下 面 的 视频 文件 则 需要 手动 


Or 4 一 = 


图 9-14 设置 自动 运行 


9.3.3 设置 多 媒体 文件 的 循环 播放 


在 该 语法 中 ，loop 的 取 值 不 是 具体 的 数字 ， 而 是 true 或 者 多 lse， 如 果 取 值 为 true， , 


这 里 的 循环 播放 一 般 在 设置 了 自动 播放 时 采用 , 与 背景 音乐 的 设置 基本 相同 。 语法 结构 如 


<embed src=" 多 媒体 文件 地 址 " loop= 是 否 循环 播放 ></embed> 


表示 媒体 文件 将 无 限 次 地 循环 播放 ; 如 果 取 值 为 false, 则 只 播放 一 次 。 这 里 的 loop 
也 可 以 设置 为 播放 次 数 ， 但 是 用 途 并 不 广泛 。 


【 例 9.15】 实 例文 件 ，ch09\9.15.html) 


<html> 

<head> 

<title> 设 置 循环 播放 </title> 

</head> 

<body> 

下 面 的 视频 文件 将 循环 播放 : <br> 

<embed src=" Wildlife.wmv " width=300 autostart=True loop=True></embed> 
</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 9-15 所 示 。 


| 
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图 9-15 设置 媒体 的 播放 次 数 


9.3.4 隐藏 多 媒体 播放 面板 


在 网 页 中 用 户 可 以 将 媒体 文件 的 声音 保留 而 隐藏 图 像 , 这 样 就 相当 于 设置 了 背景 声音 。 通 
过 hidden 参数 可 以 隐藏 播放 面板 。 语 法 结构 如 下 : 


<embed src=" 多 媒体 文件 地 址 " hidden= 是 否 隐藏 ></embed> 


在 该 语法 中 ，hidden 可 以 设置 为 两 个 值 : 一 个 是 true， 表 示 隐 藏 面板 ; 另 一 个 是 
” ， false， 表示 显示 面板 ， 这 是 添加 多 媒体 文件 的 默认 选项 。 如 果 要 保留 声音 ， 就 要 
[ 设置 文件 的 自动 播放 。 


【 例 9.16】 (实例 文件 : ch09\9.16.html) 


<html> 

<head> 

<title> 设 置 隐藏 面板 </title> 

</head> 

<body> 

下 面 的 视频 文件 播放 面板 被 隐藏 : <br> 

<embed src=" Wildlife.wmv"width=300 autostart=True hidden=True></embed> 


</body> 
</html> 
在 正 9.0 中 浏览 效果 如 图 9-16 所 示 。 可 以 看 到 播放 控制 面板 已 经 不 见 了 ， 只 能 听 到 播放 


的 声音 效果 。 
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(Be HAUserswdminist 人 -上 X | 司 说 竹本 二 


文 作用 。 六 壮 E。 各 看 V) 改革 闪 (A)。 工具] 帮助 (H) 
下 面 的 视频 文件 播放 面板 被 隐藏 : 


图 9-16 设置 隐藏 面板 
9.3.5 ”添加 其 他 类 型 的 多 媒体 文件 


除了 wmv 多 媒体 文件 之 外 ， 在 网 页 中 还 可 以 嵌入 flash、avi 等 类 型 的 多 媒体 文件 ， 方 法 
与 wmv 多 媒体 文件 相同 。 
【 例 9.17】〔 实 例文 件 ，ch09\9.17.html) 


<html> 

<head> 

<title> 嵌 入 多 媒体 文件 </title> 

</head> 

<body> 

下 面 嵌 入 不 同类 型 的 媒体 文件 ，<br> 

<embed src="1.swf" width=300></embed> 

<embed src="1.avi" width=300 height=200></embed> 
</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 9-17 所 示 。 可 以 看 到 在 页 面 中 添加 了 两 种 不 同类 型 的 媒体 文件 。 


半 HAuserswdministratowDoc 吕 - CX 上 臣 寺 和 ^Z 尘 4 文 伯 x Ce 
文件 (月 ”交错 (E) 得 看 V) 收藏 雪人 ) 工具 (T) 大 动 (H) 


| 下 面 嵌 入 不 同类 型 的 媒体 文件 : 


图 9-17 添加 其 他 类 型 的 多 媒体 文件 
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9.4 专家 解 惑 


1. 如 何 控制 背景 音乐 的 音量 ? 

默认 情况 下 ， 背 景 音乐 的 音量 和 系统 的 音量 大 小 是 一 样 的 ， 如 果 读 者 可 以 通过 使 用 
VOLUME 来 控制 音量 的 大 小 , VOLUME 的 取 值 范围 为 0~100。 例如 下 面 的 代码 就 是 控制 背景 
音乐 音量 大 小 的 例子 。 

<bgsound src="sleep.mp3" VOLUME=50> 

2. 如 何 使 用 <img> 标 记 在 网 页 中 插入 视频 文件 ? 

使 用 <img> 标 记 在 网 页 中 插入 视频 文件 ， 如 下 面 的 代码 所 示 。 

<img border="0" dynsrc="12.avi" start="fileopen" width="666" height="666"> 

其 中 dynsrc 属性 用 于 指定 动画 文件 的 文件 名 ， 包 括 文件 所 在 的 路 径 ，start 属性 用 于 指定 
动画 开始 播放 的 时 间 ，fileopen 表示 网 页 打开 时 即 播放 动画 。 


但 是 使 用 这 种 标记 时 ,如 果 用 户 的 电脑 上 没有 相应 的 视频 解码 , 会 出 现 只 有 声音 、 没 有 图 
像 的 现象 。 


一 个 拥有 美观 、 大 方 、 简 约 的 页 面 以 及 高 访问 量 的 网 站 ， 是 网 页 设计 者 的 追求 。 然 而 ， 仅 
通过 HTML 实现 是 非常 困难 的 ，HTML 语言 仅仅 定义 了 网 页 结构 ， 而 对 于 文本 样式 没有 过 多 
涉及 。 这 就 需要 一 种 技术 对 页 面 布局 、 字 体 、 颜 色 、 背 景 和 其 他 图 文 效果 的 实现 提供 更 加 精确 
的 控制 ， 这 种 技术 就 是 CSS。 


10.1 为 什么 要 使 用 CSS 


随 着 Internet 不 断 发 展 ， 对 页 面 效 果 诉 求 越 来 越 强 烈 ， 只 依赖 HTML 这 种 结构 化 标记 来 实 
现 样式 已 经 不 能 满足 网 页 设计 者 的 需要 。 其 表现 有 以 下 几 个 方面 。 


@ 维护 困难 ,为 了 修改 某 个 特殊 标记 格式 , 需要 花费 很 长 的 时 间 ， 尤 其 对 整个 网 站 而 言 ， 
后 期 修改 和 维护 成 本 较 高 。 

@ 标记 不 足 ，HTML 本 身 标 记 很 少 ， 很 多 标记 都 是 为 网 页 内 容 服务 的 ， 而 关于 内 容 样式 
标记 ， 例 如 文字 间距 、 段 落 缩 进 很 难 在 HTML 中 找到 。 

@ 网 页 过 于 腑 肿 ， 由 于 没有 同意 对 各 种 风格 样式 进行 控制 ，HTML 页 面 往往 体积 过 大 ， 
占用 掉 很 多 宝贵 的 宽度 。 

@ 定位 困难 ， 在 整体 布局 页 面 时 ，HTML 对 于 各 个 模块 的 位 置 调整 显得 捉襟见肘 ， 过 多 
的 table 标记 将 会 导致 页 面 复杂 和 后 期 维护 困难 。 


在 这 种 情况 下 ， 就 需要 寻找 一 种 可 以 将 结构 化 标记 与 丰富 的 页 面 表现 相 结合 的 技术 。CSS 
样式 技术 就 产生 了 。 

CSS (Cascading Style Sheet) 称 为 层 登 样式 表 ， 也 可 以 称 为 CSS 样式 表 或 样式 表 ， 其 文 
件 扩展 名 为 .css。CSS 是 用 于 增强 或 控制 网 页 样式 ， 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 
标记 性 语言 。 

引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离开 ， 从 而 使 网 页 设 
计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 ， 可 以 将 整个 站 点 上 所 有 网 页 都 指向 某 个 
CSS 文件 ， 设 计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ， 整 个 网 页 上 对 应 的 样式 都 会 随 之 发 生 改 
Es 
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10.2 在 HTML 中 使 用 CSS 的 方法 


CSS 样式 表 能 很 好 地 控制 页 面 显示 ， 以 达到 分 离 网 页 内 容 和 样式 代码 的 目的 。CSS 样式 
表 控 制 HTML 页 面 达到 好 的 样式 效果 ， 其 方式 通常 包括 行内 样式 、 内 嵌 样 式 、 链 接 样 式 和 导 
入 样式 。 


10.2.1 行内 样式 


行内 样式 是 所 有 样式 中 比较 简单 、 直 观 的 方法 ， 就 是 直接 把 CSS 代码 添加 到 HTML 的 标 
记 中 ， 即 作为 HTML 标记 的 属性 标记 存在 。 通 过 这 种 方法 ， 可 以 很 简单 地 对 某 个 元 素 单独 定 
义 样 式 。 

使 用 行内 样式 方法 是 直接 在 HTML 标记 中 使 用 style 属性 ， 该 属性 的 内 容 就 是 CSS 的 属 
性 和 值 ， 例 如 : 


<p style="color:red"> 段 落 样式 </p> 
【 例 10.1】 实例 文件 ，ch10\10.1.html) 


<html> 

<head> 

<title> 行 内 样式 </title> 

</head> 

<body> 

<p style="color:red:font-size:20px:text-decoration:underline:text-align:center"> 此 段落 使 用 行内 样式 修饰 
</p> 

<p style="colorblue:font-style:italic"> 小 荷 才 露 尖 尖 角 </p> 

<p style="colorblue:font-style:italic"> 早 有 晴 旺 立 上 头 </p> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 10-1 所 示 ， 可 以 看 到 2 个 p 标 记 中 都 使 用 了 style 属性 ， 并且 设 


置 了 CSS 样式 ， 各 个 样式 之 间 互 不 影响 ， 分 别 显示 自己 的 样式 效果 。 第 1 个 段落 设置 红色 字 
体 ， 居 中 显示 ， 带 有 下 滑 线 。 第 二 个 段落 蓝 色 字体 ， 以 斜体 显示 。 


区 行内 样式 简单 ， 但 这 种 方法 不 经 常 使 用 ， 因 为 这 样 添加 无 法 完全 发 挥 样式 表 “ 内 


容 结构 和 样式 控制 代码 ”分 离 的 优势 。 而 且 这 种 方式 也 不 利于 样式 的 重用 。 如 果 
L 需要 为 每 一 个 标记 都 设置 style 属性 ， 则 后 期 维护 成 本 高 ， 网 页 容易 过 胖 ， 故 不 推 
荐 使 用 。 
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图 10-1 行内 样式 显示 
10.2.2 ”内 内 样 式 


内 内 样 式 就 是 将 CSS 样式 代码 添加 到 <head> 与 </head> 之 间 , 并 且 用 <style> 和 </style> 标 记 
进行 声明 。 这 种 写法 虽然 没有 完全 实现 页 面 内 容 和 样式 控制 代码 完全 分 离 , 但 可 以 设置 一 些 比 
较 简单 的 样式 ， 并 统一 页 面 样式 。 其 格式 如 下 所 示 。 


<head> 
<style type="text/css" > 
Pp 
{ 
color:red; 
font-size:12px: 
} 
</style> 
</head> 


有 些 较 低 版 本 的 浏览 器 不 能 识别 <style> 标 记 ， 因 而 不 能 正确 地 将 样式 应 用 到 页 面 显示 上 ， 
而 是 直接 将 标记 中 的 内 容 以 文本 的 形式 显示 。 为 了 解决 此 类 问题 ， 可 以 使 用 HMTL 注释 将 标 
记 中 的 内 容 隐藏 。 如 果 浏 览 器 能 够 识别 <style> 标 记 ， 则 标记 内 被 注释 的 CSS 样式 定义 代码 依 
旧 能 够 发 挥 作 用 。 

<head> 


<style type= "text/css" > 


<!-- 
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</head> 
【 例 10.2】〔 实 例文 件 ，ch10\10.2.html) 


<html> 

<head> 

<title> 内 嵌 样式 </title> 

<style type="text/css"> 

p{ 
color:orange; 
text-align:center: 
font-weight:bolder: 
font-size:25px; 

} 

</style> 

</head> 

<body> 

<p> 此 段落 使 用 内 婴 样 式 修饰 </p> 

<p> 采 得 百花 成 蜜 后 </p> 

<p> 为 谁 辛 苦 为 谁 忙 </p> 

</body> 

</html> 


在 IE 9.0 中 浏览 效果 如 图 10-2 所 示 ， 可 以 看 到 两 个 p 标记 都 被 CSS 样式 修饰 ， 其 样式 保 


持 一 致 ， 段 落 居中 、 字 体 加 粗 并 以 橙色 显示 。 


| 全 HAuserswdminist P - © X | @ Fat 
文件 (F) ”编辑 (E) 得 看 (V) ”收藏 夫 (A) ”工具 (T) ”帮助 (H) 


[oe 


此 段落 使 用 内 嵌 样 式 修饰 
采 得 百花 成 蜜 后 
为 谁 辛苦 为 谁 忙 


图 10-2 ”内 赃 样 式 显示 
在 上 面 的 例子 中 ， 所 有 CSS 编码 都 在 style 标记 中 ， 方 便 了 后 期 维护 ， 页 面 与 行内 样式 相 


比 大 大 瘦身 了 ,但 如 果 一 个 网 站 , 拥有 很 多 页 面 , 对 了 


内 嵌 方 式 就 显得 有 点 麻烦 。 此 种 方法 只 适用 于 对 特殊 页 面 设置 单独 的 样式 风格 。 


于 不 同 页 面 p 标记 都 希望 采 | 


同样 风格 时 ， 
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10.2.3 ”链接 样式 


链接 样式 是 CSS 中 使 用 频率 最 高 ， 也 是 最 实用 的 方法 。 它 很 好 地 将 “页 面 内 容 ” 和 
“样式 风格 代码 ”分 离 成 两 个 或 多 个 文件 ,实现 了 页 面 框架 HTML 代码 和 CSS 代码 的 完 
整 分 离 ， 使 前 期 制作 和 后 期 维护 都 十 分 方便 。 同 一 个 CSS 文件 ， 根 据 需要 可 以 链接 到 网 
站 中 所 有 的 HTML 页 面 上 ， 使 得 网 站 整体 风格 统一 、 协 调 ， 并 且 后 期 维护 的 工作 量 也 大 
大 减少 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 .css 为 扩展 名 的 文件 ， 然 后 在 页 面 中 通 
过 <link> 链 接 标 记 链接 到 页 面 中 ， 而 且 该 链接 语句 必须 放 在 页 面 的 <head> 标 记 区 ， 如 下 所 
不 : 


<link rel="stylesheet" type="text/css" hre 伟 "1.css" /> 


@ rel 指定 链接 到 样式 表 ， 其 值 为 stylesheet。 

@ type 表示 样式 表 类 型 为 CSS 样式 表 

@ href 指定 了 CSS 样式 表 所 在 位 置 ， 此 处 表示 当前 路 径 下 名 称 为 1.css 的 文件 。 

这 里 使 用 的 是 相对 路 径 。 如 果 HTML 文档 与 CSS 样式 表 没 有 在 同一 路 径 下 ， 则 需要 指定 
样式 表 的 绝对 路 径 或 引用 位 置 。 

【 例 10.3】 实例 文件 ，ch10\10.3.html) 


<html> 

<head> 

<title> 链 接 样式 </title> 

<link rel="stylesheet" type="text/css" hre 仁 "9.3.css" /> 
</head> 

<body> 

<h5> 此 段落 使 用 链接 样式 修饰 </h5> 
<p> 泉 眼 无 声 惜 细 流 . </p> 

<p> 树 阴 照 水 爱 晴 柔 。</p> 

</body> 

</html> 


【 例 10.4】〔 实 例文 件 ，ch10\10.3.css) 


hl {text-align:center:} 
Pp{font-weight:29px:text-align:center:font-style:italic:} 


在 正 9.0 中 浏览 效果 如 图 10-3 所 示 ， 标 题 和 段落 以 不 同样 式 显示 ， 标 题 居 中 显示 ， 段 落 
以 斜体 居中 显示 。 


初 识 CSS 第 10 章 


ER 攻 ] 台 | 区 司 
(Ss ja navsers dninist D - © x | 全 as 


文件 (有 ”六 缠 {E) ”可 看 (V) 妆 营 夫 (A) ”工具 (T) 才 动 (H) 


| 此 段落 使 用 链接 衬 式 修饰 
间 展 无 十 租 细 芳 
到 明 照 水 爱 呈 冬 。 


图 10-3 链接 样式 显示 


链接 样式 的 最 大 优势 就 是 将 CSS 和 HTML 代码 完全 分 离 , 并 且 同 一 个 CSS 文件 能 被 不 同 
的 HTML 链接 所 使 用 。 


在 设计 整个 网 站 时 ， 可 以 将 所 有 页 面 链接 到 同一 个 CSS 文件 ， 使 用 相同 的 样式 风 
人 格 。 如 果 整 个 网 站 需要 修改 样式 ， 只 修改 CSS 文件 即 可 。 


10.2.4 导入 样式 


导入 样式 和 链接 样式 基本 相同 ， 都 是 创建 一 个 单独 的 CSS 文件 ， 然 后 再 引入 到 HTML 文 
件 中 。 只 不 过 语法 和 运作 方式 有 差别 。 采 用 导入 样式 的 样式 表 ， 在 HIML 文件 初始 化 时 ， 会 
被 导入 到 HTML 文件 内 ， 作 为 文件 的 一 部 分 ， 类 似 于 内 媒 效 果 。 而 链接 样式 是 在 HTML 标记 
需要 样式 风格 时 才 以 链接 方式 引入 。 

导入 外 部 样式 表 是 指 在 内 部 样式 表 的 <style> 标 记 中 ， 使 用 @import 导入 一 个 外 部 样式 表 ， 
例如 : 


<head> 
<style type="text/css" > 
<!-- 
@import "1.css" 
= 
</style> 
</head> 


导入 外 部 样式 表 相 当 于 将 样式 表 导 入 到 内 部 样式 表 中 , 其 方式 更 有 优势 。 导 入 外 部 样式 表 
必须 在 样式 表 的 开始 部 分 ， 其 他 内 部 样式 表 上 面 。 
【 例 10.5】〔 实 例文 件 ， ch10\10.5.html) 


<html> 

<head> 
<title> 导 入 样式 </title> 
<style> 

@import "9.6.css" 
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</style> 

</head> 

<body> 

<hl>CSS 学 习 </hl> 

<p> 此 段落 使 用 导入 样式 修饰 </p> 
</body> 

</html> 


【 例 10.6】 《实例 文件 :ch10\10.S.css) 


hl {text-align:center;color:#0000ff} 

Pp{font-weight:bolder;text-decoration:underline;font-size:20px:} 

在 Firefox 5.0 中 浏览 效果 如 图 10-4 所 示 ， 标 题 和 段落 以 不 同样 式 显示 ， 标 题 居中 显示 颜 
色 为 蓝 色 ， 段 落 以 大 小 20px 并 加 粗 显 示 。 


lt 


C388 元 习 
此 段落 使 用 导入 样式 修饰 


图 10-4 导入 样式 显示 
导入 样式 与 链接 样式 比较 ， 最 大 的 优点 就 是 可 以 一 次 导入 多 个 CSS 文件 ， 其 格式 如 下 所 


<style> 

@import "9.5.css" 

@import "test.css" 

</style> 
10.2.5 ”优先 级 问题 

如 果 同 一 个 页 面 , 采用 了 多 种 CSS 使 用 方式 ， 例 如 使 用 行内 样式 、 链 接 样式 和 内 霸 样 式 。 
如 果 这 几 种 样式 共同 作用 于 同一 个 标记 ,就 会 出 现 优先 级 问题 即 究竟 哪 种 样式 设置 有 效 。 例 
如 ， 如 果 内 嵌 设 置 字体 为 宋体 ， 链 接 样 式 设置 为 红色 ， 那 么 两 者 会 同时 生效 ， 而 如 果 都 设置 字 
体 颜 色 ， 情 况 就 会 变 得 复杂 。 


1. 行内 样式 和 内 诬 样 式 
例如 ， 有 这 样 一 种 情况 : 


<style> 
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Pp{color:red} 
</style> 
<p style =" color:blue "> 段落 应 用 样式 </p> 


在 样式 定义 中 ， 段 落 标记 <p> 匹 配 了 两 种 样式 规则 ， 一 种 使 用 内 赃 样 式 定义 颜 色 为 红色 ， 
一 种 使 用 p 行内 样式 定义 颜色 为 蓝 色 ， 而 在 页 面 代码 中 ， 该 标记 使 用 了 类 选择 符 。 但是， 标记 
内 容 最 终 会 以 哪 一 种 样式 显示 呢 ? 

【 例 10.7】 “实例 文件 : ch10\10.6.html) 


<html> 

<head> 
<title> 优 先 级 比较 </title> 
<style> 

pt{color:red} 

</style> 

</head> 

<body> 

<p style =" color:blue "> 优先 级 测试 </p> 
</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 10-5 所 示 ， 段 落 以 蓝 色 字体 显示 ， 可 以 知道 行内 优先 级 大 于 内 
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优先 级 测试 


图 10-5 优先 级 显示 
2. 内 嵌 样 式 和 链接 样式 


以 相同 例子 测试 内 媒 样 式 和 链接 样式 优先 级 ， 设 置 颜色 样式 代码 ， 单 独 放 在 一 个 CSS 文 
件 中 ， 使 用 链接 样式 引入 。 
【 例 10.8】“《 实 例文 件 : ch10\10.7.html) 


<html> 

<head> 

<title> 优 先 级 比较 </title> 

<link href="9.7.css" type="text/css" rel="stylesheet"> 
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<style>p{color:red} 
</style></head> 
<body> 
<p> 优 先 级 测试 </p> 
</body> 
</html> 
【 例 10.9】〔 实 例文 件 : ch10\10.7.css) 
pi{color:yellow} 


在 正 9.0 中 浏览 效果 如 图 10-6 所 示 ， 段 落 以 红色 字体 显示 。 
从 上 面 的 代码 中 可 以 看 出 ， 内 获 样 式 和 链接 样式 同时 对 段落 p 修饰 ， 段 落 显示 红色 字体 。 
可 以 知道 ， 内 嵌 样 式 优先 级 大 于 链接 样式 。 


(DO owraeses- ox | @ rseti 


文件 (月 ”编辑 (E) ”可 看 (V) 收藏 夫 (A) ”工具 (T) 帮助 (H) 


优先 级 测试 


图 10-6 ”优先 级 测试 
3. 链接 样式 和 导入 样式 


现在 进行 链接 样式 和 导入 样式 测试 ， 分 别 创建 两 个 CSS 文件 ， 一 个 作为 链接 ， 一 个 作为 
导入 。 
【 例 10.10】《〔 实 例文 件 ， ch10\10.8.html) 


<html> 

<head> 

<title> 优 先 级 比较 </title> 

<style> 

@import "9.8_2.css" 

</style> 

<link href="9.8_1.css" type="text/css" rel="stylesheet"> 
</head><body> 

<p> 优 先 级 测试 </p> 

</body></html> 


【 例 10.11】 《实例 文件 : ch10\10.8_1.css) 


p{color:green} 
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【 例 10.12】〔 实 例文 件 : ch10\10.8_2.css) 


picolor:purple} 
在 正 9.0 中 浏览 效果 如 图 10-7 所 示 ， 段 落 以 绿色 显示 。 


[oa -ox x| | 
文件。 六 纺 (E) ”可 看 (V) ” 收 训 夫 (A) 工具] 帮助 (H) | 
优先 级 测试 
图 10-7 优先 级 比较 
从 上 面 的 代码 可 以 看 出 ， 此 时 链接 样式 优先 级 大 于 导入 样式 优先 级 。 
10.3 ”专家 解 惑 


1. CSS 定义 字体 在 不 同 浏览 器 中 大 小 不 一 样 怎么 办 ? 


例如 使 用 font-size:14px 定义 的 宋体 文字 , 在 正 下 实际 高 是 16px, 下 空白 是 3px, 在 Firefox 
浏览 器 下 实际 高 是 17px、 上 空 1px、 下 空 3px。 其 解决 办 法 是 在 文字 定义 时 设 定 line-height， 
并 确保 所 有 文字 都 有 默认 的 line-height 值 。 

2. CSS 在 网 页 制作 中 一 般 有 4 种 用 法 ， 那 么 具体 在 使 用 时 该 采用 哪 种 ? 


有 多 个 网 页 要 用 到 的 CSS， 采 用 外 连 CSS 文件 的 方式 ， 这 样 可 大 大 减少 网 页 的 代码 ， 修 
改 起 来 非常 方便 ， 只 在 单个 网 页 中 使 用 的 CSS， 采 用 文档 头 部 方式 ， 只 有 在 一 个 网 页 的 一 、 
两 个 地 方才 用 到 的 CSS， 采 用 行内 插入 方式 。 

3. CSS 的 行内 样式 、 内 赃 样 式 和 链接 样式 可 以 在 一 个 网 页 中 混用 吗 ? 


3 种 用 法 可 以 混用 ， 且 不 会 造成 混乱 。 这 就 是 它 为 什么 称 为 “ 层 登 样式 表 ” 的 原因 ， 浏 览 
器 在 显示 网 页 时 是 这 样 处 理 的 : 先 检 查 有 没有 行内 插入 式 CSS， 有 就 执行 ， 针 对 本 人 句 的 其 他 
CSS 就 不 去 管 它 了 ， 其 次 检查 内 嵌 方 式 的 CSS， 有 就 执行 ， 在 前 两 者 都 没有 的 情况 下 再 检查 
外 连 文件 方式 的 CSS。 因 此 可 看 出 ，3 种 CSS 的 执行 优先 级 是 : 行内 样式 、 内 和 嵌 样 式 、 链 接 
样式 。 
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通过 使 用 CSS 样式 规则 能 够 修饰 HTML 标记 ， 起 到 美化 网 页 的 作用 。 但 其 更 大 的 作用 是 
将 网 页 内 容 和 网 页 样式 二 者 分 离 ， 这 样 方便 了 后 期 维护 。 本 章 将 介绍 CSS 的 基础 语法 和 使 用 。 


11.1 CSS 选择 器 


选择 器 (selector) 也 称 为 选择 符 。HTML 语言 中 的 所 有 标记 都 是 通过 不 同 的 CSS 选择 器 
进行 控制 的 。 选 择 器 不 只 是 HMTL 文档 中 的 元 素 标记 ， 它 还 可 以 是 类 (Class， 这 不 同 于 面向 
对 象 中 的 类 )、ID (元 素 的 唯一 特殊 名 称 , 便于 在 脚本 中 使 用 ) 或 是 元 素 的 某 种 状态 (如 a:link)。 
根据 CSS 选择 符 用 途 可 以 把 选择 器 分 为 标签 选择 器 、 类 选择 器 、 全 局 选择 器 、ID 选择 器 和 伪 
类 选择 器 等 。 


11.1.1 标签 选择 器 


HTML 文档 由 多 个 不 同 标记 组 成 ， 而 CSS 选择 器 就 用 于 声明 那些 标记 采用 样式 。 例 如，p 
选择 器 就 用 于 声明 页 面 中 所 有 <p> 标 记 的 样式 风格 。 同 样 也 可 以 通过 hl 选择 器 来 声明 页 面 中 
所 有 <hl> 标 记 的 CSS 风格 。 

标签 选择 器 的 基本 形式 如 下 所 示 : 


tagName {property:value} 


其 中 tagName 表示 标记 名 称 ， 例 如 p、hl 等 HTML 标记 ; proerty 表示 CSS 属性 ; value 
表示 CSS 属性 值 。 

通过 一 个 具体 标记 来 命名 , 可 以 对 文档 里 该 标记 出 现 的 地 方 应 用 样式 定义 。 这 种 做 法 通常 
用 于 设置 那些 在 整个 网 站 都 会 出 现 的 基本 样式 。 例如, 下面 的 代码 就 用 于 为 一 个 网 站 设置 默认 
字体 。 


body, p, td, th, div. blockquote. dl. ul ol { 
font-family: Tahoma., Verdana. Arial, Helvetica, sans-serif: 
font-size: lem: 
color: #000000: 

} 
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此 选择 器 是 一 系列 的 标记 ， 所 有 这 些 标记 都 将 以 定义 的 样式 〈 字 体 、 字 号 和 颜色 ) 显示 。 
理论 上 ， (body》 标记 就 是 所 需要 的 全 部 〈 因 为 所 有 其 他 标记 都 会 出 现在 〈body》 标记 内 部 ， 
并 且 将 因此 继承 它 的 属性 ), 但 是 许多 浏览 器 都 不 能 恰当 地 将 这 些 样式 属性 带 入 表格 和 其 他 元 
素 里 。 因 此 ， 为 了 完整 ， 这 里 指定 了 其 他 元 素 。 

【 例 11.1】 《实例 文件 :chll\11.1.html) 


<html> 

<head> 

<title> 标 签 选择 器 </title> 

<style> 
pi{color:blue;font-size:20px:} 

</style> 

</head> 


<p> 此 处 使 用 标签 选择 器 控制 段落 样式 </p> 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 11-1 所 示 ， 可 以 看 到 段落 以 蓝 色 字体 显示 ， 大 小 为 20px。 


信人 各 HANUsersAdminist PD - OX 


文件 (月 ” 编 强 (E) 。 豆 看 (V) 收藏 夫 (A) ”工具 (T) 帮助 (H) 


ee 
此 处 使 用 标签 选择 器 控制 段落 样式 | 


图 11-1 标签 选择 器 显示 
如 果 在 后 期 维护 中 ， 需 要 调整 段落 颜色 ， 只 需要 修改 color 属性 值 即 可 。 


国 CSS 语言 对 于 所 有 属性 和 值 都 有 相对 严格 要 求 ， 如 有 果 声 明 的 属性 没有 在 CSS 规范 
中 ， 或 者 某 个 属性 值 不 符合 属性 要 求 ， 都 不 能 使 CSS 语句 生效 。 


k 
11.1.2 ”类 选择 器 

在 一 个 页 面 中 , 使 用 标签 选择 器 ,会 控制 该 页 面 中 所 有 此 类 标记 的 显示 样式 。 如 果 需 要 重 
新 设 定 此 类 标记 中 的 一 个 标记 ， 仅 使 用 标签 选择 器 是 不 能 达到 效果 的 ， 还 需要 使 用 类 (class) 
选择 器 。 

类 选择 器 用 来 为 一 系列 标记 定义 相同 的 呈现 方式 ， 常 用 语法 格式 如 下 所 示 : 
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. ClassValue {property:value} 


其 中 classValue 是 选择 器 的 名 称 ， 具 体 名 称 由 CSS 制定 者 自己 命名 。 如 果 一 个 标记 具有 
class 属性 且 class 属性 值 为 classValue， 那 么 该 标记 的 呈现 样式 由 该 选择 器 指定 。 在 定义 类 选 
择 符 时 ， 需 要 在 classValue 前 面 加 一 个 句点 〈.) 。 使 用 示例 如 下 所 示 : 


Id{color:red} 
.Se{font-size:3px} 


上 面 定义 了 两 个 类 选择 器 ， 分 别 为 rd 和 se。 类 的 名 称 可 以 是 任意 英文 字符 串 或 以 英文 开 
头 的 字符 与 数字 的 组 合 ， 一 般 情 况 下 ， 类 的 名 称 是 其 功能 及 效果 的 简要 缩写 。 
可 以 通过 p 标记 的 class 属性 来 使 用 类 选择 符 ， 用 法 如 下 所 示 : 


<p class="rd">class 属性 是 用 来 引用 类 选择 器 的 属性 </p> 


前 面 定义 的 选择 器 只 能 应 用 于 指定 的 标记 中 (例如 p 标记 ) 。 如 果 需 要 在 不 同 标记 中 使 用 
相同 的 呈现 方式 ， 方 法 如 下 所 示 : 


<p class="rd"> 段 落 样式 </p> 
<h3 class="rd"> 标 题 样式 </h3> 


【 例 11.2】〔 实 例文 件 ，ch11\11.2.html) 


<html> 
<head><title> 类 选择 器 </title> 
<style> 
.aa{ 
color'blue: 
font-size:20px: 
} 
bb{ 
color:red: 
font-size:22px: 
lB 
</style></head><body> 
<h3 class=bb> 学 习 类 选择 器 </h3> 
<p class="aa"> 此 处 使 用 类 选择 器 aa 控制 段落 样式 </p> 
<p class="bb"> 此 处 使 用 类 选择 器 bb 控制 段落 样式 </p> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 11-2 所 示 ， 可 以 看 到 第 一 段 以 蓝 色 字体 显示 ， 大 小 为 20px， 第 
二 段 以 红色 字体 显示 ， 大 小 为 22px， 标 题 同样 以 红色 字体 显示 ， 大 小 为 22px。 
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[全 人 EECEEF 


文件 (站 病 沽 (6 各 看 收 匡 夫 [A， 工具 大助 (H) 


| 学 习 类 选择 器 


| 此 处 使 用 类 选择 器 aa 控 制 段落 样式 


此 处 使 用 类 选择 器 bb 控制 段落 样式 


11-2 ”类 选择 器 的 显示 
11.1.3 ID 选择 器 


ID 选择 器 和 类 选择 器 类 似 ， 都 是 针对 特定 属性 的 属性 值 进行 匹配 。ID 选择 器 定义 的 是 某 
一 个 特定 的 HTML 元 素 ， 一 个 网 页 文件 中 只 能 有 一 个 元 素 使 用 某 一 ID 的 属性 值 。 
定义 ID 选择 器 的 基本 语法 格式 如 下 所 示 : 


#idValue {property:value} 


在 上 述 基 本 语法 格式 中 ，idValue 是 选择 器 名 称 ， 可 以 由 CSS 定义 者 自己 命名 。 如 果 某 标 
记 具 有 id 属性 ， 并 且 该 属性 值 为 4Value， 那 么 该 标记 的 呈现 样式 由 该 ID 选择 器 指定 。 在 正 
常情 况 下 id 属性 值 在 文档 中 具有 唯一 性 。 

下 面 定义 了 一 个 ID 选择 器 : 


#fontstyle 


{ 
color:red; 
font-weight:bold: 
font-size:large 

} 


在 页 面 中 ， 具 有 ID 属性 的 标记 才能 够 使 用 ID 选择 器 定义 样式 ， 所 以 与 类 选择 器 相 比 ， 
使 用 ID 选择 器 有 具有 一 定 的 局 限 性 。 类 选择 器 与 ID 选择 器 主要 有 两 个 区 别 。 
@ 类 选择 器 可 以 给 任意 数量 的 标记 定义 样式 ， 但 ID 选择 器 在 页 面 的 标记 中 只 能 使 用 一 次 。 
@ ID 选择 器 比 类 选择 器 具有 更 高 的 优先 级 ， 即 当 ID 选择 器 与 类 选择 器 发 生 冲突 时 ， 优 
先 使 用 ID 选择 器 。 
【 例 11.3】“《 实 例文 件 : chll\11.3.html) 


<html> 
<head> 
<title>ID 选择 器 </title> 


< 
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<style> 
#fontstyle{ 
color:blue; 
font-weight:bold: 
} 
#textstyle{ 
color:red; 
font-size:22px; 
上 
</style> 
</head> 
<body> 
<h3 id=textstyle> 学 习 ID 选择 器 </h3> 
<p id=textstyle> 此 处 使 用 ID 选择 器 aa 控制 段落 样式 </p> 
<p id=fontstyle> 此 处 使 用 ID 选择 器 bb 控制 段落 样式 </p> 
</body> 
</html> 


在 IE 9.0 中 浏览 效果 如 图 11-3 所 示 , 可 以 看 到 第 一 个 段落 以 红色 字体 显示 , 大 小 为 22px， 
第 二 段落 以 红色 字体 显示 ， 字 体 加 粗 ， 标 题 同样 以 红色 字体 显示 ， 大 小 为 20px。 
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文件 (F) ” 编 强 (E) ”查看 (V) 收藏 闪 (A) ”工具 (T) ”帮助 (H) 


| 学 习 ID 选 择 器 


此 处 使 用 ID 选择 器 aa 控制 段落 样式 
| 此 处 使 用 ID 选择 器 bb 控制 段落 样式 


11-3 ID 选择 器 显示 
从 上 面 的 代码 可 以 看 出 , 标题 h3 和 第 一 个 段落 都 使 用 了 名 称 为 textstyle 的 ID 选择 器 ,并 
都 显示 了 CSS 方案 ， 在 很 多 浏览 器 下 ，ID 选择 器 可 以 用 于 多 个 标记 。 但 这 里 需要 指出 的 是 ， 
将 ID 选择 器 用 于 多 个 标记 是 错误 的 , 因为 每 个 标记 定义 的 ID 不 只 有 CSS 可 以 调用 ,JavaScript 
等 脚本 语言 同样 也 可 以 调用 。 
11.1.4 全 局 选择 器 


如 果 想 要 让 一 个 页 面 中 的 所 有 html 标记 使 用 同一 种 样式 ， 可 以 使 用 全 局 选择 器 。 顾 名 思 
义 ， 全 局 选择 器 就 是 对 所 有 HTML 元 素 起 作用 。 其 语法 格式 为 : 
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* {property:value} 


其 中 “*” 表 示 对 所 有 元 素 起 作用 ，property 表示 CSS 属性 名 称 ，value 表示 属性 值 。 用 法 
如 下 所 示 : 


* {margin:0; padding:0:} 
【 例 11.4】〔 实 例文 件 ， ch11\11.4.html) 


<html> 
<head><title> 全 局 选择 器 </title> 
<style> 
St 

color:red; 

font-size:30px 
} 
</style></head> 


<body> 

<p> 使 用 全 局 选择 器 修饰 </p> 
<p> 十 年 生死 两 茫茫 ，</p> 
<hl> 不 思量 ， 自 难忘 。</hl> 


</body> 
</html> 


在 IE 9.0 中 浏览 效果 如 图 11-4 所 示 ， 可 以 看 到 两 个 段落 和 标题 都 以 红色 字体 显示 ， 大 小 
为 30px。 


Fe 区 引 
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文件 (有 篇 雪 (E) 。 碍 看 (V) 收藏 闪 (A) 工具 (Tm 帮助 (H) 


使 用 全 局 选择 器 修饰 


十 年 生死 两 茫茫 ， 
不 思量 ， 自 难忘 。 


11-4 全 局 选择 器 显示 
11.1.5 ”组合 选择 器 
将 多 种 选择 器 组 合 使 用 , 可 以 构成 一 种 复合 选择 器 , 也 称 为 组 合 选择 器 。 一 般 的 组 合 方式 
是 标签 选择 器 和 类 选择 器 组 合 或 标签 选择 器 和 ID 选择 器 组 合 。 由 于 这 两 种 组 合 方式 的 原理 和 
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效果 一 样 ， 所 以 这 里 只 介绍 标签 选择 器 和 类 选择 器 的 组 合 。 
组 合 选择 器 只 是 一 种 组 合 形式 ， 不 是 一 种 真正 的 选择 器 , 但 在 实际 中 经 常 使 用 。 其 用 法 如 
下 所 示 : 


.Orderlist li {xxxx} 
.tableset td {} 


组 合 选 择 嚣 一般 用 于 重复 出 现 并 且 样 式 相同 的 一 些 标签 里 ， 如 列表 、td 单元 格 和 dd 自 
定义 列表 等 。 例 如 


hl.red {color: red} 
<hl class="red"></h1> 


【 例 11.5】〔 实 例文 件 ，ch11\11.5.html) 


<html> 
<head> 
<title> 组 合 选择 器 </title> 
<style> 
pt{ 
color:red 
} 
Pp firstPar{ 
color:blue 
} 
‘firstPar{ 
color:green 
} 
</style></head><body> 
<p> 这 是 普通 段落 </p> 
<p class="firstPar"> 此 处 使 用 组 合 选择 器 </p> 
<hl class="firstPar"> 我 是 一 个 标题 </h1> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 11-5 所 示 ， 可 以 看 到 第 一 个 段落 颜色 为 红色 ， 采 用 的 p 标签 选 
择 器 ， 第 二 个 段 显 示 的 是 蓝 色 ， 采 用 的 p 标签 选择 器 和 类 选择 器 二 者 组 合 的 选择 器 ， 标 题 hl 
以 绿色 字体 显示 ， 采 用 的 是 类 选择 器 。 
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到 | 昌 Hi\Users\Administ P ~ © x | 香 二 一 一 一 
| HD PE) SHV Ka IRM Wm | 


| 这 是 普通 段 车 


| it 站 使 用 组 合 选择 器 


我 是 一 个 标题 


11-5 组 合 选择 器 显示 
11.1.6 ”继承 选择 器 


继承 选择 器 的 规则 是 , 子 标记 在 没有 定义 的 情况 下 所 有 的 样式 是 继承 父 标记 的 ， 当 子 标记 
重复 定义 了 父 标记 已 经 定义 过 的 声明 时 , 子 标记 就 执行 后 面 的 声明 ; 与 父 标记 不 冲突 的 地 方 仍 
然 沿 用 父 标 记 的 声明 ; 

使 用 继承 选择 器 就 必须 先 了 解 HTML 文档 树 和 CSS 继承 ， 这 样 才能 够 较 好 地 运用 继承 选 
择 器 。 每 个 HTML 都 可 以 被 看 作 一 个 文档 树 ， 文 档 树 的 根部 就 是 html 标记 ， 而 head 和 body 
标记 就 是 其 子 元 素 。head 和 body 中 的 其 他 标记 就 是 html 标记 的 子孙 元 素 。 整 个 HTML 就 呈 
现 一 种 祖先 和 子孙 的 树 状 关系 。CSS 的 继承 是 指 子孙 元 素 继承 祖先 元 素 的 某 些 属性 。 

用 法 示例 如 下 所 示 : 


<div class="test"> 
<span><img src="xxx" alt=" 示 例 图 片 "/></span> 
</div> 


对 于 上 面 而 言 ， 如 果 其 修饰 样式 为 下 面 代码 : 
-test span img {border:1px blue solid:} 


表示 该 选择 器 先 找 到 class 为 test 的 标记 ， 再 从 其 子 标记 中 查找 span 标记 ， 然 后 从 span 
的 子 标记 中 找到 img 标记 。 也 可 以 采用 下 面 的 形式 : 


div span img {border:1px blue solid:} 


可 以 看 出 其 规律 是 从 左 往 右 ， 依 次 细 化 ， 最 后 锁定 要 控制 的 标记 。 
【 例 11.6】〔 实 例文 件 : chl11\11.6.html) 

<html> 

<head> 

<title> 继 承 选择 器 </title> 

<style type="text/css"> 


*。163。 


精 殉 HTML+CSS 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


hl {color:red: text-decoration:underline:} 

hl strong{color:#004400:; font-size:40px:} 

</style> 

</head> 

<body> 

<hl> 测 试 CSS 的 <strong> 继 承 </strong> 效 果 </h1> 

<h1> 此 处 使 用 继承 <font> 选 择 器 </font> 了 么 ? </hl> 

</body> 

</html> 

在 正 9.0 中 浏览 效果 如 图 11-6 所 示 ， 可 以 看 到 第 一 个 段落 颜色 为 红色 ， 但 是 “继承 ”两 
个 字 使 用 绿色 显示 ， 并 且 大 小 为 40px， 其 他 的 CSS 样式 都 是 继承 父 标 记 <h1> 的 样式 ， 例 如 下 
划 线 设置 。 第 二 个 标题 中 ， 虽 然 使 用 了 font 标记 修饰 “选择 器 ”， 但 其 样式 都 继承 于 父 类 标 
记 <hl>。 


En -ox |Ourman | 


文件 (有 ] ” 编 铝 (E) ”可 看 (V) 收藏 天 (A) 工具 (D 帮助 (H) 


测试 CSs 的 继承 效果 | 


此 处 使 用 继承 wi#8 了 人 么 ? 


图 11-6 继承 选择 器 显示 
11.1.7” 伪 类 选择 器 
伪 类 也 是 选择 器 的 一 种 ， 但 是 用 伪 类 定义 的 CSS 样式 并 不 是 作用 在 标记 上 的 。 伪 类 作用 
在 标记 的 状态 上 。 伪 类 包括 :first-child、:link:、:vistited、:hover、:active、:focus 和 :lang 等 。 
其 中 有 一 组 伪 类 是 主流 浏览 器 都 支持 的 ， 就 是 超 链接 的 伪 类 ， 包 括 :link:、:vistited、:hover 和 : 


active。 


E 由 于 很 多 浏览 器 支持 不 同类 型 的 伪 类 ， 没 有 统一 的 标准 ， 所 以 很 多 伪 类 通常 不 会 
用 到 。 


bb 


伪 类 选择 符 定义 的 样式 最 常用 于 标记 <a> 上 ， 它 表示 链接 4 种 不 同 的 状态 : 未 访问 链接 
(link)、 已 访问 链接 (visited)、 激 活 链接 (active) 和 鼠标 停留 在 链接 上 (hover)。 

要 注意 的 是 ，<a> 可 以 只 具有 一 种 状态 〈:link) ， 或 者 同时 具有 两 种 或 三 种 状态 。 例 如 ， 
任何 一 个 有 HREF 属性 的 <a> 标 签 ， 在 未 有 任何 操作 时 都 已 经 具备 了 :link 的 条 件 ， 也 就 是 满足 
了 有 链接 属性 这 个 条 件 ; 访问 过 的 <a> 标 记 ， 同 时 会 具备 :link 和 :visited 两 种 状态 。 把 鼠标 移 
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到 访问 过 的 <a> 标 记 上 的 时 候 ，<a> 标 记 就 同时 具备 了 :link、:visited 和 :hover 三 种 状态 。 用 法 
示例 如 下 所 示 : 


a:link {color:#FF0000: text-decoration:none} 
aivisited {color:#00FF00: text-decoration:none} 
a:hover{color:#0000FF: text-decoration:underline} 
a:active {color:#FFOOFF: text-decoration:underline} 


上 面 的 样式 表示 该 链接 未 访问 时 颜色 为 红色 且 无 下 划 线 , 访问 后 是 绿色 且 无 下 划 线 , 激活 
链接 时 为 蓝 色 且 有 下 划 线 ， 鼠 标 放 在 链接 上 为 紫色 且 有 下 划 线 。 
【 例 11.7】〔 实 例文 件 ，ch11\11.7.html) 


<html> 

<head> 

<title> 伪 类 </title> 

<style> 

a:link {color: red} 旋 未 访问 的 链接 */ 
a:Visited {color: green} 片 已 访问 的 链接 */ 
a:hover {color:blue} 族 鼠标 移动 到 链接 上 */ 
a:active {color: orange} /#* 选 定 的 链接 */ 
</style> 

</head> 

<body> 

<a hre 全 "> 链接 到 本 页 </a> 

<a href="http://www.sohu.com"> 搜 狐 </a> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 11-7 所 示 ， 可 以 看 到 两 个 超级 链接 ， 第 一 个 是 鼠标 停留 在 上 方 
时 ， 超 级 链接 显示 颜色 为 蓝 色 ， 另 一 个 是 访问 过 后 ， 超 级 链接 显示 颜色 为 绿色 。 


Ke [Hauser dninist P - cx [s 人 类 


文件 (有 ” 编 强 (E) 得 看 (V) 收藏 闪 (A) ”工具 (T) 帮助 (H) 


file;///H;/Users/Administrator/Documents/ ) 


11-7 伪 类 显示 
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11.1.8 ”属性 选择 器 


前 面 在 使 用 CSS 样式 对 HTML 标记 进行 修饰 时 , 都 是 通过 HTML 标记 名 称 或 自 定义 名 称 
指向 具体 HTML 元 素 的 ， 进 而 控制 HTML 标记 样式 。 那 么 能 不 能 直接 通过 标记 属性 ， 而 不 是 
标记 名 称 或 自 定义 名 称 来 进行 修饰 呢 ? 直 接 使 用 属性 控制 HTML 标记 样式 , 称 为 属性 选择 器 。 

属性 选择 器 就 是 根据 某 个 属性 是 否 存在 或 属性 值 来 寻找 元 素 , 因此 能 够 获得 有 趣 和 强大 的 

【 例 11.8】 “实例 文件 : chll\11.8.html) 


<html> 

<head> 

<title> 属 性 选择 器 </title> 

<style> 

[align]{color:red} 

[align="left"] {font-size:20px;font-weight:bolder:} 
[lang^="en"]{color:blue:text-decoration:underline;} 
[src$="gif']{fborder-width:Spx:boder-color:#ff9900} 
</style> 

</head> 

<body> 

<p align=center> 这 是 使 用 属性 定义 样式 </p> 

<p align=left> 这 是 使 用 属性 值 定义 样式 </p> 

<p lang="en-us"> 此 处 使 用 属性 值 前 缀 定义 样式 </p> 
<p> 下 面 使 用 了 属性 值 后 缀 定义 样式 </p> 

<img src="2.gif" border="1"/> 

</body> 

</html> 


在 Firefox 5.0 中 浏览 效果 如 图 11-8 示 ， 可 以 看 到 第 一 个 段落 使 用 属性 align 定义 样式 , 其 
字体 颜色 为 红色 。 第 二 个 段落 使 用 属性 值 left 修饰 样式 ， 并 且 大 小 为 20px， 加 粗 显 示 ， 其 字 
体 颜 色 为 红色 ， 是 因为 该 段落 使 用 了 align 这 个 属性 。 第 三 个 段落 显示 红色 ， 且 带 有 下 划 线 ， 
是 因为 属性 lang 的 值 前 绥 为 en。 最 后 的 图 片 以 边框 样式 显示 ， 是 因为 属性 值 后 级 为 gif。 


这 是 使 用 属性 值 定义 样式 
| 此 处 倍 用 属性 仿 前 控 定 义 样式 


下 奋 使 用 了 层 性 售后 综 二 并 式 LE 


图 11-8 属性 选择 器 显示 
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11.2 ”选择 器 声明 


使 用 CSS 选择 器 可 以 控制 HTML 标记 样式 ， 其 中 每 个 选择 器 属性 可 以 一 次 声明 多 个 ， 即 
创建 多 个 CSS 属性 修饰 HTML 标记 ， 实 际 上 也 可 以 将 选择 器 声明 多 个 ， 并 且 任 何 形式 的 选择 
器 都 是 合法 的 。 


11.2.1 集体 声明 


在 一 个 页 面 中 ， 有 时 需要 将 不 同 种 类 的 标记 样式 保持 一 致 ， 例 如 需要 p 标记 和 hl 字体 保 
持 一 致 ， 此 时 可 以 使 p 标记 和 hl 标记 共同 使 用 类 选择 器 ， 除 这 个 方法 之 外 ， 还 可 以 使 用 集体 
声明 方法 。 集 体 声明 就 是 在 声明 各 种 CSS 选择 器 时 ， 如 果 某 些 选择 器 的 风格 完全 相同 ， 或 者 
部 分 相同 ， 可 以 将 风格 相同 的 CSS 选择 器 同时 声明 。 

【 例 11.9】 《实例 文件 :chll\11.9.html) 


<html> 
<head> 
<title> 集 体 声 明 </title> 
<style type="text/css"> 
hl1,h2, h3,p{ 
color:red; 
font-size:20pX: 
font-weight'bolder: 
} 
</style></head><body> 
<hl> 让 我 怎么 感谢 您 ，</h1> 
<h2> 当 我 走向 你 的 时 候 ，</h2> 
<h3> 我 原 想 收获 一 缕 春 风 ，</h3> 
<p> 你 却 给 了 我 整个 春天 。</p> 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 11-9 所 示 ， 可 以 看 到 网 页 中 的 标题 1、 标 题 2、 标 题 3 和 段落 都 
以 红色 字体 加 粗 显 示 ， 并 且 大 小 都 为 20px。 


wenvamwvieP- Ox | B rem 
文件 F] 稀 当 (。 豆 看 V) 。 收 莹 关 (A) 工具 TT) 孝 却 (H) 


| 让 我 怎么 感谢 您 ， 


当 我 走向 你 的 时 候 ， 
我 原 想 收获 一 变 春 风 ， 
你 却 给 了 我 整个 春天 。 


图 11-9 集体 声明 显示 
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11.2.2 ”多 重 榜 套 声明 


在 通过 CSS 控制 HTML 标记 样式 时 ， 还 可 以 使 用 层 层 递 进 的 方式 ， 即 嵌 套 方式 ， 对 指定 
位 置 的 HTML 标记 进行 修饰 ， 例 如 当 <p> 与 </p> 标 记 之 间 包 含 <a></a> 标 记 时 ， 就 可 以 使 用 这 
种 方式 对 HMTL 标记 进行 修饰 。 

【 例 11.10】〈 实 例文 件 : chll\11.10.html) 


<html> 

<head> 

<title> 多 重 嵌 套 声明 </title> 

<style> 

p{font-size:20px:} 

Pp a{color:red:font-size:30px:font-weight:bolder;} 
</style></head><body> 

<p> 这 是 一 个 多 重 幅 套 <a href=""> 测 试 </a></p> 
</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 11-10 所 示 ， 可 以 看 到 在 段落 中 ， 超 级 链接 显示 为 红色 字体 ， 大 
小 为 30px， 其 原因 是 使 用 嵌 套 声明 。 


闫 H\UserswAdminist DD ”CX | 大 多重 到 大 声明 
文件 (有 ” 妨 强 (E) ”各 看 (V) 收 训 交 (A) 工具 (T) 帮助 (H) 


| 这 是 一 个 多 重 嵌 套 测 试 


图 11-10 ”多 重税 套 声明 显示 
11.3 CSS 继承 


可 以 将 HIML 网 页 看 作 是 一 个 节点 的 集合 ， 在 一 个 HTML 文档 中 可 以 包含 不 同 的 标记 ， 
HTML 文档 中 的 每 个 成 份 都 是 一 个 节点 。 一 个 节点 树 中 的 所 有 节点 彼此 都 是 有 关系 的 。 节 点 
树 可 以 把 一 个 HIML 文档 展示 为 一 个 节点 集 ， 以 及 它们 之 间 的 连接 。 在 一 个 节点 树 中 ， 最 顶 
端的 节点 被 称 为 根 。 除 根 之 外 ， 每 一 个 节点 都 拥有 父 节点 。 一 个 节点 可 以 有 无 限 的 子 ， 叶 是 无 
子 的 节点 ， 同 级 节点 指 拥 有 相同 的 父 的 节点 。HTML 树 结构 如 图 11-11 所 示 。 

CSS 继承 指 的 是 子 标 记 会 继承 父 标记 的 所 有 样式 风格 ， 并 可 以 在 父 标记 样式 风格 的 基础 
上 加 以 修改 ， 产 生 新 的 样式 ， 而 子 标记 样式 风格 完全 不 会 影响 父 标 记 。 
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图 11-11 HTML 树 结构 
【 例 11.11】 《实例 文件 : chll\11.11.html) 


<html> 

<head><title> 多 重典 套 声明 </title> 
<style> 

p{font-size:20px:color:red} 

span {font-size:30px:} 
</style></head><body> 

<p> 这 是 一 个 继承 <span> 测 试 </span></p> 
</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 11-12 所 示 , 可 以 看 到 , 在 段落 中 字体 颜色 为 红色 , 大 小 为 20px， 
但 段落 span 标记 中 的 文本 为 红色 字体 , 大 小 为 30px, 此 样式 首先 继承 了 父 标记 中 的 颜色 样式 ， 
并 重新 定义 了 自己 的 样式 。 


这 是 一 个 继承 测试 


图 11-12 CSS 继承 显示 


以 利用 这 种 巧妙 的 继承 关系 ， 大 大 缩减 代码 的 编写 量 ， 并 提高 可 读 性 ， 尤 其 是 在 


茵 CSS 继承 贯穿 整个 CSS 设计 的 始终 , 每 个 标记 都 遵循 着 CSS 继承 的 概念 。 同 样 可 
| 页 面 内 容 很 多 和 父子 关系 庞杂 的 时 候 。 


s i690 
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11.5 ”综合 实例 一 一 制作 新 闻 菜 单 
在 网 上 浏览 新 闻 是 每 个 上 网 者 都 喜欢 做 的 事情 。 一 个 布局 合理 、 样 式 美观 的 新 闻 菜单 是 吸 
引 人 的 主要 途径 之 一 。 本 实例 使 用 CSS 控制 HTML 标记 , 创建 新 闻 菜 单 。 具 体 步骤 如 下 所 示 。 


创建 一 个 新 闻 菜单 ， 需 要 包含 两 个 部 分 ,一 个 是 父 菜 单 ， 用 来 表明 新 闻 类 别 ， 一 个 是 子 菜 
单 ， 介 绍 具体 的 新 闻 消 息 。 创 建 菜单 的 方式 有 很 多 ， 可 以 用 table 创建 ， 也 可 以 用 列表 创建 ， 
还 可 以 使 用 段落 p 创建 。 本 实例 采用 p 标记 结合 div 创建 。 完 成 后 的 效果 如 图 11-13 所 示 。 


[eo] 司 DVRRA\chos41 P - C X | 避 Smm 


文件 (有 编 加 (E) 查看 (V) ”收藏 夫 (A) 工具 (T) 帮助 (H) 


?月 周 周 权 房 团 报名 
“ 50 万 买 下 两 居 会 员 优惠 全 世界 大 学 排名 “ 工 攻 阶层 久 字 美国 
“家 电 | 买房 上 焦点 打 电 话 送礼 楼 市 松动 百 余 项 目 打折 
“财经 油价 大 跌 CFI 新 高 


图 11-13 新 闻 菜 单 显示 
02 分 析 局 部 和 整体 ， 构 建 HTML 网 页 。 


在 一 个 新 闻 菜 单 中 ， 可 以 分 为 3 个 层次 ， 一 个 新 闻 父 菜单 ， 一 个 新 闻 焦 点 ， 一 个 新 闻 子 菜 
单 ， 分 别 使 用 div 创建 。 其 HIML 代码 如 下 所 示 。 


<html > 
<head><title> 导 航 菜单 </title> 
</head><body> 
<div class="big"> 
<h2> 时 事 热点 </h2> 
<div class="up"> 
<a hre 合 "#">7 月 周 周 疏 房 团 报名 </a> 
</div> <div class="down"> 
<p>。 50 万 买 下 两 居 会 员 优惠 全 世界 大 学 排名 工薪 阶层 留学 美国 </p><p> 
“家电 | 买房 上 焦点 打 电 话 送礼 楼 市 松动 百 余 项 目 打折 </p><p> 
“财经 | 油价 大 跌 ”CPI 新 高 </p> 
</div> </div> 
</body> 
</html> 


在 正 9.0 中 的 游览 效果 , 如 图 11-14 所 示 。 可 以 看 到 一 个 标题 、 一 个 超级 链接 和 3 个 段落 ， 
以 普通 样式 显示 。 
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ecxlsmwme 


| 月 局 局 耻 房 还 扫 名 

中 50 万 买 下 两 居 会 员 优惠 全 世界 大 学 排名 ”工薪 阶层 留学 美国 
‖' 家电 | 买房 上 焦点 打 电 话 送 礼 。 楼 市 栏 动 百 款项 目 打折 
对 到 | 油价 大 跌 CPI 新 高 


图 11-14 无 CSS 标记 显示 
to3j 添加 CSS 代码 ， 修 饰 整体 样式 。 
对 于 HTML 页 面 ， 需 要 有 一 个 整体 样式 ， 其 代码 如 下 所 示 : 


对 
padding:0px: 
margin:0px: 

} 

body{ 
font-family:" 宋 体 "; 
font-size:12px; 
} 

.big{ 
width:400px: 
border:#33CCCC 1px solid: 

} 


在 正 9.0 中 的 浏览 效果 如 图 11-15 所 示 。 可 以 看 到 全 局 层 div 会 以 边框 显示 ， 宽 度 为 400 
像素 ， 其 颜色 为 浅 绿色 ，body 文档 内 容 中 字体 采用 宋体 ， 大 小 为 12 像素 ， 并 且 定义 内 容 和 层 
之 间 空 隙 为 零 ， 层 和 层 之 间 空 隙 为 零 。 


忧 圳 
打 ! 


如 全 世界 大 学 排名 ”工薪 阶 是 留学 美国 
上 焦点 | 机 楼 市 松动 百 余 项 目 打折 


图 11-15 整体 样式 添加 
四 4 添加 CSS 代码 ， 修 饰 新 闻 父 菜单 。 


对 新 闻 父 类 菜单 进行 CSS 控制 ， 其 代码 如 下 所 示 : 
h2 {background-color:olive: 
display:block: 


kh 
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width:400px: 
height:18px: 
line-height:18px: 
font-size:14px:} 


在 下 9.0 中 的 游览 效果 如 图 11-16 所 示 。 可 以 看 到 超级 链接 “时 事 热点 ”会 以 矩形 方 框 显 
示 ， 其 背景 色 为 橄榄 色 ， 字 体 大 小 为 14 像素 ， 行 高 为 18 像素 。 


-ee 


CA Sowap -ox|Ssme xx | 


OIC 


文件 (。 编 鱼 (E) 。 坦 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


必 全 负 已 吉 全 世界 大 学 排名 ”工业 阶层 留学 美国 
上 焦点 打 电 话 送 礼 楼 市 松动 百 余 项 目 打折 
大 跌 。 CPI 新 高 


图 11-16 ”修饰 超级 链接 
5 添加 CSS 菜单， 修饰 子 菜单 。 


.up {padding-bottom:5px; 
text-align:center: } 
Pp{line-height:20px:} 


在 正 9.0 中 的 游览 效果 如 图 11-17 所 示 。 可 以 看 到 “7 月 周 周 爬 房 团 报名 ”居中 显示 ， 即 
在 第 二 层 div 中 使 用 类 标记 up 修饰 。 所 有 段落 之 间 间 隙 增 大 ， 即 为 P 标记 设置 行 高 。 
Ow cx]emme | 
文件 (有) ” 妨 加 (E) ”查看 (V) ”收藏 交 (A) ”工具 (T) ”帮助 (H) 


"50 万 买 下 两 居 会 员 忧 惠 全 世界 大 学 排名 工 藉 阶 旦 留学 美国 
“家 电 | 买房 上 焦点 打 电 话 送 礼 楼 市 松动 百 余 项 目 打折 
， 财 经 | 油价 大 跌 。 crI 新 高 


11-17 子 菜 单 样式 显示 
06| 添加 CSS 菜单， 修饰 超级 链接 。 
affont-size:16px: 
font-weight:800: 
text-decoration:none: 
margin-top:5pxX: 
display:block:} 
aihover {color:#FF0000: 
text-decoration:underline:} 
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在 正 9.0 中 的 游览 效果 如 图 11-18 所 示 。 可 以 看 到 “7 月 周 周 爬 房 团 报名 ”字体 变 大 ， 并 


且 加 粗 , 无 下 划 线 显示 , 当 鼠 标 放 在 此 超级 链接 上 时 , 以 红色 字体 显示 , 并 且 下 面 带 有 下 划 线 。 


页 


(DO Eara lp- ox|S sm 


文件 (有) ” 编 器 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


* 50 万 买 下 两 居 会 员 忧 囊 全 世界 大 学 排名 工薪 阶层 留学 美国 


“家 电 | 买房 上 焦点 打 电 话 送礼 楼 市 松动 百 余 项 目 打折 
"财经 | 油价 大 跌 CPI 新 高 


图 11-18 ”超级 链接 修饰 显示 


11.6 ”专家 解 惑 


1. CSS+DIV 布局 有 什么 好 处 ? 


使 用 CSS+DIV 布局 有 下 面 几 个 好 处 : 

(1) 大 大 缩减 页 面 代码 ， 提 高 页 面 浏览 速度 ， 减 少 带 宽 成 本 。 

(2) 结构 清晰 ， 容 易 被 搜索 引擎 搜索 到 。 

(3) 缩短 改版 时 间 。 只 要 简单 地 修改 几 个 CSS 文件 就 可 以 重新 设计 一 个 具有 成 百 上 千 个 
(4) 强大 的 字体 控制 和 排版 能 力 。CSS 控制 字体 的 能 力 比 糟糕 的 FONT 标签 好 多 了 ， 有 


了 CSS， 我 们 不 再 需要 用 FONT 标签 或 者 透明 的 1 px GIF 图 片 来 控制 标题 , 或 改变 字体 颜色 、 
字体 样式 了 。 


2. 如 何 下 载 网 页 中 的 CSS 文件 ? 
选择 网 页 上 面 的 【查看 】>【 源 文件 】 菜单 命令 ， 如 果 有 CSS， 可 以 直接 复制 下 来 ， 如 果 


没有 ， 可 以 找 找 有 没有 类 似 于 这 种 连接 的 代码 ， 例 如 : 


<link href="/index.css" rel="stylesheet" type="text/css"> 
在 打开 的 网 址 后 面 直接 加 “/index.css”， 然 后 回 车 就 可 以 打开 CSS 文件 了 。 

3. 学 了 JavaScript 就 不 用 学 CSS 了 吗 ? 

JS 主要 应 用 于 动态 表现 (注意 不 是 交互 ， 交 互 使 用 的 AJAX 技术 还 是 含有 JS 的 ) ， 而 


CSS 用 于 静态 表现 。JS 的 动态 内 容 是 CSS 永远 不 能 做 到 的 。 但 CSS 不 是 一 个 辅助 ， 它 是 网 页 
表现 的 灵魂 。 


第 12 章 
< CSs 字 体 与 段 沙 属 性 ， 


常见 的 网 站 、 博 客 是 使 用 文字 或 图 片 来 阐述 自己 观点 ， 其 中 文字 是 传递 信息 的 主要 手段 。 
而 美观 大 方 的 网 站 或 者 博客 , 需要 使 用 CSS 样式 修饰 。 设 置 文本 样式 是 CSS 技术 的 基本 使 命 ， 
通过 CSS 文本 标记 语言 ， 可 以 设置 文本 的 样式 和 粗细 等 。 


12.1 CSS 文字 样式 


-个 杂乱 无 序 的 网 页 , 会 使 人 产生 枯燥 无 味 的 感觉 。 而 一 个 美观 大 方 的 网 页 , 会 让 人 有 流 
连 忘 返 的 感觉 。 可 以 通过 CSS 字体 样式 来 设置 这 种 效果 。 通 过 本 节 的 CSS 学 习 ， 会 使 读者 设 
计 出 令 人 难忘 的 网 页 。 


12.1.1 字体 (font-family) 


font-family 属性 用 于 指定 字体 类 型 ， 如 宋体 、 黑 体 、 隶 书 、Times New Roman 等 ， 即 在 网 
页 中 展示 字体 不 同 的 形状 。 有 具体 的 语法 如 下 所 示 。 


{font-family : name} 
{font-family : cursive | fantasy | monospace | serif | sans-serif} 


从 语法 格式 上 可 以 看 出 ，font-family 有 两 种 声明 方式 。 第 一 种 方式 ， 使 用 name 字体 名 称 
按 优 先 顺序 排列 ， 以 逗号 隔 开 ， 如 果 字 体 名 称 包含 空格 ， 则 应 使 用 引号 括 起 ， 在 CSS 中 ， 比 
较 常 用 的 是 第 一 种 声明 方式 。 第 二 种 声明 方式 使 用 所 列 出 的 字体 序列 名 称 。 如 果 使 用 fantasy 
序列 ， 将 提供 默认 字体 序列 。 

【 例 12.1】〔 实 例文 件 : chl2\12.1.html) 


<html> 

<style type=text/css> 

pt{font-family: 黑 体 } 

</style> 

<body> 

<p align=center> 天 行 健 ， 君 子 以 自强 不 息 。</p> 
</body> 

</html> 
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在 下 9.0 中 的 浏览 效果 如 图 12-1 所 示 ， 可 以 看 到 文字 居中 并 以 黑体 显示 。 
el 


A A 
(DD 和 HAUserswAdminist PD ~- © X | @ HiUsers\ 
文件 虽 ” 给 得 [E) 坦 看 (V) 。 收 茂 夫 (A) 工具 (T) 帮助 (H) 


天 行 键 ， 君 子 以 自强 不 息 。 


图 12-1 字 型 显示 


在 显示 字体 时 , 如果 指 定 一 种 特殊 字体 类 型 ,而 在 浏览 器 或 者 操作 系统 中 该 类 型 不 能 正确 
获取 ,可 以 通过 font-family 预 设 多 种 字体 类 型 。font-family 属性 可 以 预 置 多 个 供 页 面 使 用 的 字 
体 类 型 ， 即 字体 类 型 序列 ， 其 中 每 种 字 型 之 间 使 用 逗号 隔 开 。 如 果 前 面 的 字体 类 型 不 能 够 正确 
显示 ， 则 系统 将 自动 选择 后 一 种 字体 类 型 ， 依 次 类 推 。 

所 以 , 在 设计 页 面 时 ， 一 定 要 考虑 字体 的 显示 问题 ， 为 了 保证 页 面 达到 预计 的 效果 ， 最 好 
提供 多 种 字体 类 型 ， 而 且 最 好 以 最 基本 的 字体 类 型 作为 最 后 一 个 选择 。 

其 样式 设置 如 下 所 示 : 


P 
{ 
font-family: 华 文 彩云 ,黑体 ,宋体 


} 
当 font-family 属性 值 中 的 字体 类 型 由 多 个 字符 串 和 空格 组 成 时 ,例如 Times New Roman， 
那么 ， 该 值 就 需要 使 用 双 引 号 引起 来 。 


Pp 


font-family: "Times New Roman" 
} 


12.1.2 字号 (font-size) 
在 网 页 中 ,标题 通常 使 用 较 大 字体 显示 ， 用 于 引 人 注 意 ， 小 号 字体 用 来 显示 正常 内 容 ， 大 


小 字体 结合 形成 网 页 ， 既 吸引 了 人 们 的 眼球 ， 又 提高 了 阅读 速度 。 
在 CSS 规定 中 ， 通 常 使 用 font-size 设置 文字 大 小 。 其 语法 格式 如 下 所 示 。 


{font-size : 数值 | inherit | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 
length} 


其 中 ,可 以 通过 数值 来 定义 字体 大 小 ,例如 用 font-size:10px 的 方式 定义 字体 大 小 为 10 个 
像素 。 此 外 ， 还 可 以 通过 medium 之 类 的 参数 定义 字体 的 大 小 ， 其 参数 含义 如 表 12-1 所 示 。 
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表 12-1 font-size 参数 列表 


参数 说 明 
xx-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 小 
x-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 小 


small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 小 
medium 默认 值 。 绝 对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 正常 
large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 大 


x-large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 大 
xx-large 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 大 
larger 相对 字体 尺寸 。 相 对 于 父 对 像 中 字体 尺寸 进行 相对 增 大 。 使 用 成 比例 的 em 单位 计算 
smaller 相对 字体 尺寸 。 相 对 于 父 对 像 中 字体 尺寸 进行 相对 减 小 。 使 用 成 比例 的 em 单位 计算 
length 百分数 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 , 不 可 为 负 值 。 其 百分比 取 值 基于 父 对 象 
中 字体 的 尺寸 


【 例 12.2】 “实例 文件 ，chl2\12.2.html) 


<html> 

<body> 

<div style="font-size:10pt"> 旧 梦 依稀 往事 迷离 春花 秋月 里 
<p style="font-size:small"> 如 雾 里 看 花 水 中 望月 漂 来 又 浮 去 </p> 
<p style="font-size:larger"> 君 来 有 声 君 去 无 语 翻云覆雨 里 </p> 
<p style="font-size:x-small"> 虽 两 情 相 惜 两 心 相 仪 得 来 复 失去 </p> 
<p style="font-size:x-larger"> 有 诗 待 和 有 歌 待 应 有 心 待 相 系 </p> 
<p style="font-size:50%"> 望 长 相思 望 长 相 守 却 空 留 琴 与 笛 </p> 
<p style="font-size:25pt"> 以 情 相 悦 以 心 相 许 以 身 相 假 依 </p> 

</div> 

</body> 

</html> 


在 正 9.0 中 的 浏览 效果 如 图 12-2 所 示 ， 可 以 看 到 网 页 中 的 文字 被 设置 成 不 同 的 大 小 ， 其 
设置 方式 采用 了 绝对 数值 、 关 键 字 和 百分比 等 形式 。 


图 12-2 字体 大 小 显示 
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在 上 面 的 例子 中 ，font-size 字体 大 小 为 50% 时 ， 其 比较 对 象 是 上 一 级 标记 中 的 10pt。 
同样 我 们 还 可 以 使 用 inherit 值 ， 直 接 继 承 上 级 标记 的 字体 大 小 。 例 如 : 


<div style="font-size:50pt"> 上 级 标记 
<p style="font-size: inherit "> 继承 </p> 
</div> 


12.1.3 ”字体 风格 (font-style) 


font-style 通常 用 来 定义 字体 风格 ， 即 字体 的 显示 样式 。 在 CSS 规定 中 ， 其 语法 格式 如 下 
所 示 。 


font-style : normal | italic | oblique linherit 


其 属性 值 有 4 个， 具体 含义 如 表 12-2 所 示 。 


表 12-2 font-style 属性 表 


[It 值 | 人 
默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 
浏览 器 会 显示 一 个 斜体 的 字体 样式 


将 没有 斜体 变量 的 特殊 字体 ， 浏 览 器 会 显示 一 个 倾斜 的 字体 样式 
规定 应 该 从 父 元 素 继承 字体 样式 


【 例 12.3】 (实例 文件 : chl2\12.3.html) 


<html> 

<body> 
<p style="font-style:italic"> 梅 花香 自 苦 寒 来 </p> 
<p style="font-style:normal"> 梅 花香 自 苦寒 来 </p> 
<p style="font-style:oblique"> 梅 花香 自 苦 寒 来 </p> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 12-3 所 示 ， 可 以 看 到 文字 分 别 显示 不 同 的 样式 。 


局 ] HAUsersAdminist PD» 上 X|‖ 厦 HANusersv 
文件 fj。 奖 庄 (5) 各 看 (V) 收 得 突 (A) 工具 (帮助 (H) 


休克 和 司 者 间 光 
梅花 香 自 苦寒 来 
仿 沦 玫 司 坷 千 光 


图 12-3 字体 风格 显示 
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12.1.4 加 粗 字 体 〈font-weight) 


通过 设置 字体 的 粗细 ， 可 以 让 文字 显示 不 同 的 外 观 。 通 过 CSS 中 的 font-weight 属性 可 以 
定义 字体 的 粗细 程度 。 其 语法 格式 如 下 所 示 。 


{font-weight:100~900|boldlbolderllighterlnormal:} 


font-weight 属性 有 13 个 有 效 值 ， 分 别 是 bold、bolder、lighter、normal、100~900。 如 果 没 
有 设置 该 属性 ， 则 使 用 其 默认 值 normal。 属性 值 设置 为 100~900, 值 越 大 , 加 粗 的 程度 就 越 高 。 
其 具体 含义 如 表 12-3 所 示 。 


表 12-3 font-weight 属性 表 


描述 
定义 粗 体 字体 


定义 更 粗 的 字体 ， 相 对 值 


ET 
A 


浏览 器 默认 的 字体 粗细 是 400, 另外 也 可 以 通过 参数 lighter 和 bolder 使 得 字体 在 原 有 基础 
上 显得 更 细 或 更 粗 。 
【 例 12.4】 《实例 文件 :chl2\12.4.html) 


<html> 
<body> 
<p style="font-weight:bold"> 那 年 落叶 风 零 的 秋季 (bold)</p> 
<p style="font-weight'bolder"> 彼 此 在 茫 落 人 海 相遇 (boldenD</p> 
<p style="font-weight:lighter"> 不 是 天 时 ， 地 利 (lighter)</p> 
<p style="font-weight:normal"> 而 是 缘分 前 世 的 累积 (normal)</p> 
<p style="font-weight:100"> 从 那 时 起 (100)</p> 
<p style="font-weight:400"> 一 颗 漂泊 的 心 ， 不 再 寻 寻 砚 砚 (400)</p> 
<p style="font-weight:900"> 空 旷 的 心房 ， 不 再 冷 冷 清 清 (900)</p> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 12-4 所 示 ， 可 以 看 到 文字 居中 并 以 不 同方 式 加 粗 ， 其 中 使 用 了 
关键 字 加 粗 和 数值 加 粗 。 
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(3 | HAUsersAdminist PD - © X | 感 HANusersAdministr-，x 


文件 (月 ” 蝙 注 (E) ”至 春 (V) ” 收 臣 交 (A) ”工具 (T) 帮助 (H) 
那 年 落叶 风 零 的 秋季 (bold) 

彼此 在 茫 范 人 海 相遇 (bolder) 

不 是 天 时 ， 地 利 (lighter) 

而 是 缘分 前 世 的 累积 (normal) 

从 那 时 起 (100) 

一 颗 漂 泊 的 心 ， 不 再 寻 寻 砚 砚 (400) 
空旷 的 心房 ， 不 再 冷 冷清 清 (900) 


图 12-4 字体 粗细 显示 

12.1.5 “小 写字 母 转 为 大 写字 母 〈font-variant) 

font-variant 属性 设置 大 写字 母 的 字体 显示 文本 ， 这 意味 着 所 有 的 小 写字 母 均 会 被 转换 为 
大 写 ， 但 是 所 有 使 用 大 写字 体 的 字母 与 其 余 文 本 相 比 ， 其 字体 尺寸 更 小 。 在 CSS 中 ， 其 语法 
格式 如 下 所 示 。 

font-variant : normal | small-caps linherit 

font-variant 有 3 个 属性 值 ， 分 别 是 normal、inherit 和 small-caps。 其 具体 含义 如 表 12-4 所 
不 。 


表 12-4 font-variant 属性 表 


默认 值 。 浏 览 器 会 显示 一 个 标准 的 字体 


浏览 器 会 显示 小 型 大 写字 母 的 字体 


规定 应 该 从 父 元 素 继承 font-variant 属性 的 值 


【 例 12.5】 “实例 文件 ， chl2\12.5.html) 


<html> 

<body> 

<p style="font-variant:normal">Happy BirthDay to You</p> 

<p style="font-variant:small-caps">Happy BirthDay to You</p> 
</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 12-5 所 示 ， 可 以 看 到 字母 以 大 写 形式 显示 。 
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ee 司 HUsersAdminis 只 - © X | @ HUsersAdministr 


文件 月 ”六 汤 (E) ”到 看 (V) 收 芝 交 (A) 工具 (TD) 。 才 动 (H) 


Happy BirthDay to You 


| HappY BIRTHDAY TO YoU 
| 


图 12-5 字母 大 小 写 转换 
12.1.6 ”字体 复合 属性 (font) 


在 设计 网 页 时 , 为 了 使 网 页 布局 合理 且 文 本 规范 ,对 字体 的 设计 需要 使 用 多 种 属性 , 例如 
定义 字体 粗细 和 字体 大 小 。 但 是 ， 分 别 书写 多 个 属性 相对 比较 麻烦 ，CSS 样式 表 提供 的 font 
属性 就 解决 了 这 一 问题 。 

font 属性 可 以 一 次 性 使 用 多 个 属性 的 属性 值 定义 文本 字体 。 其 语法 格式 如 下 所 示 。 


{font:font-style font-variant font-weight font-szie font-family} 


font 属性 中 的 属性 排列 顺序 是 font-style、 font-variant、 font-weight、 font-size 和 font-family， 
各 个 属性 的 属性 值 之 间 使 用 空格 隔 开 ， 但 是 ， 如 果 font-family 属性 要 定义 多 个 属性 值 ， 则 需 
使 用 逗号 〈,) 隔 开 。 
属性 排列 中 ，font-style、font-variant 和 font-weight 这 3 个 属性 值 是 可 以 自由 调换 的 。 而 
font-size 和 font-family 则 必须 按照 固定 的 顺序 出 现 , 而 且 还 必须 都 出 现在 font 属性 中 。 如 果 这 
两 者 的 顺序 不 对 ， 或 缺少 一 个 ， 那 么 ， 整 个 样式 规则 可 能 就 会 被 忽略 。 
【 例 12.6】〔 实 例文 件 ，ch12\12.6.html) 


<html> 
<style type=text/css> 


DB{ 
font:normal small-caps bolder 20pt "Cambria"."Times New Roman". 宋 体 


} 
</style> 
<body> 


p> 

读书 和 学 习 是 在 别人 思想 和 知识 的 帮助 下 ， 建 立 起 自己 的 思想 和 知识 。 
Sp 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 12-6 所 示 ， 可 以 看 到 文字 被 设置 成 宋体 并 加 粗 。 
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5- ] HAUsersAdminist PD - GX | @ HAUsersAdministr.. x 
文件 (月 闫 过 [6 下 看 (V) ， 疏 二 闪失 工 贞 [D 帮 动 (H) 


读书 和 学 习 是 在 别人 思想 和 知识 
sein 建立 起 自己 的 思想 和 
识 。 


图 12-6 复合 属性 的 显示 
12.1.7 ”字体 颜色 (color) 


没有 色彩 的 网 页 是 枯燥 而 没有 生机 的 , 这 就 意味 着 优秀 的 网 页 设计 者 不 仅 能 够 合理 安排 页 
面 布局 ， 而 且 还 要 具有 一 定 的 色彩 搭配 能 力 ， 这 样 才能 够 使 网 页 更 加 精美 、 更 具 表现 力 ， 并 给 
浏览 者 以 亲切 感 。 

在 CSS 样式 中 ,通常 使 用 color 属性 来 定义 颜色 。 其 属性 值 通常 使 用 下 面 的 方式 设 定 ， 如 
表 12-5 所 示 。 


表 12-5 color 属性 表 


规定 颜色 值 为 颜色 名 称 的 颜色 《例如 red) 


规定 颜色 值 为 十 六 进 制 值 的 颜色 《例如 #ft0000) 


规定 颜色 值 为 rgb 代码 的 颜色 (例如 rgb(255.0.0)) 


规定 应 该 从 父 元 素 继承 颜色 


【 例 12.7】 《实例 文件 :chl2\12.7.html) 


<html> 

<head> 

<style type="text/css"> 

body {color:red} 

hl {color:#00ff00} 

Pp-ex {color:rgb(0,0.255)} 

</style> 

</head> 

<body> 

<hl> 这 是 标题 1</h1> 

<p> 这 是 一 段 普通 的 段落 。 请 注意 ， 该 段落 的 文本 是 红色 的 。 在 body 选择 器 中 定义 了 本 页 面 中 的 默认 
文本 颜色 。 

</p> 

<p class="ex"> 该 段落 定义 了 class="ex"。 该 段落 中 的 文本 是 蓝 色 的 。</p> 
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</body> 
</html> 
在 正 9.0 中 浏览 效果 如 图 12-7 所 示 ， 可 以 看 到 文字 以 不 同 颜色 显示 ， 代 码 中 采用 了 不 同 
的 颜色 取 值 方式 。 


] HAUsersAdminis PD * SX | @ HUsersAdministr.. x 
文件 (月 ”六 名 (E) 至 看 (V) ”站 着 交 (A) 工具 (T) 帮助 (H) 


这 是 标题 1 

这 是 一 段 普通 的 段落 。 请 注意 ， 该 段落 的 文本 是 红色 的 。 
在 body 选择 器 中 定义 了 本 页 面 中 的 默认 文本 颜色 。 
该 段落 定义 了 class=”ex”。 该 段落 中 的 文本 是 蓝 色 的 。 


图 12-7 color 属性 显示 


12.2 CSS 段落 样式 


网 页 由 文字 组 成 ， 而 用 来 表达 同一 个 意思 的 多 个 文字 组 合 ,可 以 称 为 段落 。 段 落 是 文章 的 
基本 单位 , 同样 也 是 网 页 的 基本 单位 。 段落 的 放置 与 效果 的 显示 会 直接 影响 到 页 面 的 布局 及 风 
格 。CSS 样式 表 提 供 了 文本 属性 来 实现 对 页 面 中 段落 文本 的 控制 。 

12.2.1 单词 间隔 (word-spacing) 

如 果 设 置 合理 ,单词 之 间 的 间隔 会 为 整个 网 页 布局 节省 空间 ,还 可 以 给 人 赏心悦目 的 感觉 。 
在 CSS 中 ， 可 以 使 用 word-spacing 属性 直接 指定 区 域 或 者 段落 中 字符 之 间 的 间隔 。 

word-spacing 属性 用 于 设 定 词 与 词 之 间 的 间距 ， 即 增加 或 者 减少 词 与 词 之 间 的 间隔 。 其 语 
法 格式 如 下 所 示 。 

word-spacing : normal | length 

其 中 属性 值 normal 和 length 含义 如 表 12-6 所 示 。 

表 12-6 单词 间隔 属性 表 


属性 值 说 明 


默认 ， 定 义 单词 之 间 的 标准 间隔 


length 定义 单词 之 间 的 固定 宽带 ， 可 以 接受 正 值 或 负 值 


【 例 12.8】《 实 例文 件 : chl2\12.8.html) 


人 之 
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<p style="word-spacing:normal">Welcome to my home</p> 
<p style="word-spacing:15px">Welcome to my home</p> 
<p style="word-spacing:15px"> 欢 迎 来 中 国旅 游 </p> 
</body> 

</htm> 


在 正 9.0 中 浏览 效果 如 图 12-8 所 示 ， 可 以 看 到 段落 中 的 单词 以 不 同 间隔 显示 。 


|] HAUsersAdminist PD » © X ‖ 厦 HANusersAdministr. 
文件 (月 ” 妨 镶 {E) ”可 看 (V) ”收藏 交 (A) 工具 (D) 帮助 (H) 


Welcome to my home 
Welcome to m home 


欢迎 来 中 国旅 游 


图 12-8 ” 设 定 词 间隔 显示 


一 从 上 面 显 示 的 结果 可 以 看 出 ，word-spacing 属性 不 能 用 于 设 定 文字 之 间 的 间隔 。 | 


心 
12.2.2 ”字符 间隔 (letter-spacing) 


在 一 个 网 页 中 , 还 可 能 涉及 多 个 字符 文本 , 将 字符 文本 之 间 的 间距 设置 得 和 词 间隔 保持 一 
致 ， 进 而 保持 页 面 的 整体 行 ， 是 网 页 设计 者 必须 完成 的 。 词 与 词 之 间 可 以 通过 word-spacing 
属性 进行 设置 ， 那 么 字符 之 间 使 用 什么 设置 呢 ? 

在 CSS 中 ， 可 以 通过 letter-spacing 属性 来 设置 字符 文本 之 间 的 距离 。 即 在 文本 字符 之 间 
插入 多 少 空 间 ， 这 里 允许 使 用 负 值 ， 这 会 让 字母 之 间 更 加 紧凑 。 其 语法 格式 如 下 所 示 。 


letter-spacing : normal | length 
其 属性 值 含义 如 表 12-7 所 示 。 
表 12-7 字符 间隔 属性 表 


属性 值 。 | 说 明 
默认 间隔 ， 即 以 字符 之 间 的 标准 间隔 显示 


由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 什 


【 例 12.9】〔 实 例文 件 : ch12\12.9.html) 


<html> 
<body> 
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<p style=" letter-spacing:normal">Welcome to my home</p> 
<p style=" letter-spacing:5px">Welcome to my home</p> 
<p style="letter-spacing:lex"> 这 里 的 字 间 距 是 lex</p> 

<p style="letter-spacing:-lex"> 这 里 的 字 间 距 是 -lex</p> 

<p style="letter-spacing:lem"> 这 里 的 字 间 距 是 lem</p> 
</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 12-9 所 示 ， 可 以 看 到 文字 间距 以 不 同 大 小 显示 。 


人 国 HNUsersAdminist PD - OX 是 HANuserswAdministr，x | 


文件 (站 ” 汶 强 (E) 吾 看 (V) ” 收 蕙 闪 (A) 工具 (D) 大 动 (H) 


Welcome to my home 


Welcome to my home 


这 里 的 字 间 距 是 1ex 
3 
这 里 的 字 间 距 是 1en 


12-9” 字 间距 效果 


性 司 当 设置 的 字 间 距 为 -lex 时 ， 文 字 就 会 粘 到 一 块 。 | 


\ 


12.2.3 ”文字 修饰 (text-decoration) 


在 编辑 网 页 文本 时 ， 有 的 文字 需要 突出 重点 , 这 时 可 以 增加 下 划 线 , 或 者 增加 项 划 线 和 删 
除 线 效果 ， 从 而 吸引 读者 的 眼球 。 在 CSS 中 ，text-decoration 属性 是 文本 修饰 属性 ， 该 属性 可 
以 为 页 面 提 供 多 种 文本 的 修饰 效果 ， 如 下 划 线 、 删 除 线 、 闪 烁 等 。 

text-decoration 属性 语法 格式 如 下 所 示 。 


text-decoration:nonellunderlinellblinklloverlinellline-through 
其 属性 值 含义 ， 如 表 12-8 所 示 。 


表 12-8 ”text-decoration 属性 表 


描述 

默认 值 ， 对 文本 不 进行 任何 修饰 
underline | 下 划 线 

overline | 上 划 线 

line-through | 删除 线 

blink 


none 
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【 例 12.10】〈 实 例文 件 : ch12\12.10.html) 


<html> 
<body> 
<p style="text-decoration:none"> 《清明 》 ! </p> 
<p style="text-decoration:underline"> 清 明 时 节 雨 纷纷 ，</p> 
<p style="text-decoration:overline"> 路 上 行人 欲 断 瑰 。</p> 
<p style="text-decoration:line-through"> 借 问 酒家 何 处 有 ，</p> 
<p style="textrdecoration:blink"> 牧 童 遥 指 杏 花 村 。</p> 
<Jbody> 
</html> 


在 正 9.0 中 显示 效果 如 图 12-10 所 示 。 可 以 看 到 段落 中 出 现 了 下 划 线 、 上 划 线 和 删除 线 等 。 


[全 5 HAUsersAdminist PD - OX |@ hausers aministr.. x 


文件 (月 ” 编 强 (E) 可 看 (V) 收 京 闪 (A) 工 曙 (T) 帮助 (H) 


< 清明》! 


牧童 贤 指 可 花村 。 


12-10 文本 修饰 显示 


本 blink 闪烁 效果 只 有 Mozilla 和 Netscape 浏览 器 支持 ,而 IE 和 其 他 浏览 器 (如 Opera ) 
都 不 支持 该 效果 。 


改 


12.2.4 ”垂直 对 齐 方式 〈vertial-align) 


在 网 页 文本 编辑 中 ， 对 齐 有 很 多 方式 ， 字 行 排 在 一 行 的 中 央 位 置 叫 “ 居 中 ”， 文 章 的 标题 
和 表格 中 的 数据 一 般 都 居中 排 。 有 时 还 要 求 文字 垂直 对 齐 ， 即 文字 项 部 对 齐 ， 或 者 底部 对 齐 。 

在 CSS 中 ， 可 以 直接 使 用 vertical-align 属性 来 定义 ， 该 属性 用 来 设 定 垂直 对 齐 方式 。 该 
属性 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 的 基线 的 垂直 对 齐 。 允 许 指定 负 长 度 值 和 百分比 
值 。 这 会 使 元 素 降低 而 不 是 升 高 。 在 表单 元 格 中 , 这 个 属性 会 设置 单元 格 框 中 的 单元 格 内 容 的 
对 齐 方 式 。 

vertical-align 属性 语法 格式 如 下 所 示 。 


{vertical-align: 属 性 值 } 


vertical-align 属性 值 有 8 个 预 设 值 可 使 用 ， 也 可 以 使 用 百分比 。 这 8 个 预 设 值 如 表 12-9 
所 示 。 
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表 12-9 ”vertical-align 属性 表 


属性 值 说 明 

baseline 默认 。 元 素 放 置 在 父 元 素 的 基线 上 

sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文本 的 上 标 

top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 
text-top 把 元 素 的 顶端 与 父 元 素 字 体 的 顶端 对 齐 


middle 把 此 元 素 放置 在 父 元 素 的 中 部 


bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 


text-bottom 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 
使 用 "line-height” 属性 的 百分比 值 来 排列 此 元 素 。 人 允许 使 用 负 值 


【 例 12.11】 实例 文件 :ch12\12.11.html) 


<html> 
<body> 
<p> 
世界 杯 <b style=" font-size:8pt;vertical-align:super">2014</b>! 
中 国 队 <b style="font-size: 8pt:vertical-align: sub">[ 注 ]</b>! 
加 油 ! <img src="1.gif" style="vertical-align: baseline"> 
</p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif' style="vertical-align:top"> 
</p> 
<hr/> 
<p ><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif' style="vertical-align:text-top"> 
</p> 
<p><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif' style="vertical-align:bottom"> 
</p> 
<hr/> 
<p ><img src="2.gif" style="vertical-align:middle"/> 
世界 杯 ! 中 国 队 ! 加 油 ! <img src="1.gif' style="vertical-align:text-bottom"> 
</p> 
<p> 
世界 杯 <b style=" font-size:8pt:vertical-align:100%">2008</b>! 
中 国 队 <b style="font-size: 8pt:vertical-align: -100%">[ 注 ]</b>! 
加 油 ! <img src="1.gif' style="vertical-align: baseline"> 
</p> 
</body> 
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</htm> 


在 下 9.0 中 浏览 效果 如 图 12-11 所 示 ， 可 以 看 到 文字 在 垂直 方向 以 不 同 的 对 齐 方式 显示 。 


剧 中 国 队 ! 加 遇 ! 训 区 


| i 


12-11 垂直 对 齐 显示 


从 上 面 的 实例 中 可 以 看 出 , 上 下 标 在 页 面 中 的 数学 运算 或 注释 标号 使 用 得 比较 多 。 顶端 对 
齐 有 两 种 参照 方式 , 一 种 是 参照 整个 文本 块 , 一 种 是 参照 文本 。 底 部 对 齐 同 顶端 对 齐 方 式 相同 ， 
分 别 参 照 文本 块 和 文本 块 中 包含 的 文本 。 


vertical-align 属性 值 还 能 使 用 百分比 来 设 定 垂直 高 度 , 该 高 度 具 有 相对 性 的 , 它 是 
| 基于 行 高 的 值 来 计算 的 。 而 且 百 分 比 还 能 使 用 正 负 号 ， 正 百分比 使 文本 上 升 ， 负 
| 百分比 使 文本 下 降 。 


12.2.5 ”文本 转换 (text-transform) 


根据 需要 , 将 小 写字 母 转换 为 大 写字 母 , 或 者 将 大 写字 母 转换 小 写 , 在 文本 编辑 中 都 是 很 
常见 的 。 在 CSS 样式 中 ，text-transform 属性 可 用 于 设 定 文本 字体 的 大 小 写 转换 。text-transform 
属性 语法 格式 如 下 所 示 。 


text-transform : none | capitalize | uppercase | lowercase 
其 属性 值 含义 ， 如 表 12-10 所 示 。 


表 12-10 ”text-transform 属性 表 


none 无 转换 发 生 
| capitalize 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 转换 发 生 
| uppercase 转换 成 大 写 
lowercase 转换 成 小 写 
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因为 文本 转换 属性 仅 作 用 于 字母 型 文本 ， 相 对 来 说 比较 简单 。 
【 例 12.12】 (实例 文件 : chl2\12.12.html) 


<html> 
<body style="font-size:15pt; font-weight:bold"> 
<p style="text-transform:none">welcome to beijing</p> 
<p style="text-transform:capitalize">welcome to beijing</p> 
<p style="text-transform:lowercase">WELCOME TO BEIIING</p> 
<p style="text-transform:uppercase">welcome to beijing</p> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 12-12 所 示 。 


短 ] H\Users\Administ PD ~ CX 大 HNUserswAdministr，x 
文件 (F) 。 刀 吉 (E) 。 豆 看 (V) 收藏 交 (A) 工具 (T) 。 帮 动 (H) 


Welcome to beijing 


Welcome To Beijing 


Welcome to beijing 


WELCOME TO BEIJING 


图 12-12 大 小 写字 母 转换 显示 
12.2.6 水平 对 齐 方式 〈textralign) 

一 般 情况 下 ， 居 中 对 齐 适用 于 标题 类 文本 ， 其 他 对 齐 方 式 可 以 根据 页 面 布局 来 选择 使 用 。 
根据 需要 ， 可 以 设置 多 种 对 齐 ， 例 如 水 平方 向 上 的 居中 、 左 对 齐 、 右 对 齐 或 者 两 端 对 齐 等 。 在 
CSS 中 ， 可 以 通过 text-align 属性 进行 设置 。 

text-align 属性 用 于 定义 对 象 文本 的 对 齐 方式 ，textralign 语法 格式 如 下 所 示 。 

{ text-align: STextAlign } 

其 属性 值 含 义 如 表 12-11 所 示 。 

表 12-11 text-align 属性 表 


文本 向 行 的 左边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 开始 边缘 


对 齐 
right 文本 向 行 的 右边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 结束 边缘 
对 齐 
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( 续 表 ) 
属性 值 说 明 
Center 文本 在 行内 居中 对 齐 
justify 文本 根据 text-justify 的 属性 设置 方法 分 散 对 齐 。 即 两 端 对 齐 ， 均 匀 分 布 


match-parent | 继承 父 元 素 的 对 齐 方式 ， 但 有 个 例外 : 继承 的 start 或 者 end 值 是 根据 父 元 素 的 
direction 值 进行 计算 的 ， 因 此 计算 的 结果 可 能 是 left 或 者 right 
inherit | 继承 父 元 素 的 对 齐 方式 


在 新 增加 的 属性 值 中 ,start 和 end 属性 值 主要 是 针对 行内 元 素 的 , 即 在 包含 元 素 的 头 部 或 
尾部 显示 ; 而 <string> 属 性 值 主要 用 于 表格 单元 格 中 ， 将 根据 某 个 指定 的 字符 对 齐 。 
【 例 12.13】 《实例 文件 : ch12\12.13.html) 


<html> 
<body> 
<hl style="text-align:center"> 登 幽 州 台 歌 </h1> 
<h3 style="text-align:left"> 选 自 : </h3> 
<h3 style="text-align:right"> 
<img src="l1.gif’ /> 
唐诗 三 百 首 </h3> 
<p style="text-align:justify"> 
前 不 见 古人 
后 不 见 来 者 
</p> 
</body> 
</html> 


在 IE 9.0 中 浏览 效果 如 图 12-13 所 示 , 可 以 看 到 文字 在 水 平方 向 上 以 不 同 的 对 齐 方 式 显 示 。 


天 ] 
WK S| 加 HAUsersAdminist P = © Xx | 


文件 中。 并 总 (6) 到 看 (V)。 改 硬 交 (A) 工具 (各 动 (H) 


登 网 州 台 歌 


感 H\usersAdministr 


选 自 : 


图 12-13 对齐 效 果 图 


text-align 属性 只 能 用 于 文本 块 ， 而 不 能 直接 应 用 到 图 像 标 记 <img>。 如 果 要 使 图 像 同文 本 
一 样 应 用 对 齐 方 式 ， 那 么 就 必须 将 图 像 包 含 在 文本 块 中 。 如 例 12-13， 由 于 向 右 对 齐 方式 作用 
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于 <h3> 标 记 定义 的 文本 块 ， 图 像 包 含 在 文本 块 中 ， 所 以 图 像 能 够 同文 本 一 样 向 右 对 齐 。 
12.2.7 ”文本 缩 进 (text-indent) 


在 普通 段落 中 , 通常 首 行 缩 进 两 个 字符 , 用 来 表示 这 是 一 个 段落 的 开始 。 同 样 在 网 页 的 文 
本 编辑 中 可 以 通过 指定 属性 , 来 控制 文本 缩 进 。CSS 的 text-indent 属性 就 用 来 设 定 文本 块 中 首 
行 的 缩 进 。 

text-indent 属性 语法 格式 如 下 所 示 。 

text-indent : length 


其 中 ,length 属性 值 表示 有 百分比 数字 或 有 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 
为 负 值 。 可 以 这 样 认 为 , text-indent 属性 可 以 定义 两 种 缩 进 方式 , 一 种 是 直接 定义 缩 进 的 长 度 ， 
另 一 种 是 定义 缩 进 百分比 。 使 用 该 属性 ，HTML 任何 标记 都 可 以 使 首 行 以 给 定 的 长 度 或 百 分 
【 例 12.14】 《实例 文件 : chl2\12.14.html) 


<html> 
<body> 
<p style="text-indent:10mm"> 
此 处 直接 定义 长 度 ， 直 接 缩 进 。 
<p> 
<p style="text-indent:10%"> 
此 处 使 用 百分比 ， 进 行 缩 进 。 
</p> 
</body> 
</html> 


在 焉 9.0 中 浏览 效果 如 图 12-14 所 示 ， 可 以 看 到 文字 以 首 行 缩 进 方式 显示 。 


全 了 图 HAUsersAdminist PD = © X | @ HUsersadmin 


文件 (月 ” 编 强 (E) 。 吉 看 V) 收 营 夫 (A) 工具 (T) 帮助 (H) 
此 处 直接 定义 长 度 ， 直 接 缩 进 。 


此 处 使 用 百分比 ， 进 行 缩 进 。 


图 12-14 缩 进 显示 窗口 
如 果 上 级 标记 定义 了 text-indent 属性 ， 那 么 子 标记 可 以 继承 其 上 级 标记 的 缩 进 长 度 。 
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12.2.8 文本 行 高 〈line-height) 
在 CSS 中 ，line-height 属性 用 来 设置 行 间距 ， 即 行 高 。 其 语法 格式 如 下 所 示 。 
line-height : normal | length 
其 属性 值 的 具体 含义 如 表 12-12 所 示 。 
表 12-12 line-height 属性 表 


属性 值 “| 说 明 
| aemmal | 默认 行 高 ， 即 网 页 文本 的 标准 行 高 | 
length | 百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 其 百分比 取 值 是 基于 字体 


的 高 度 尺寸 


【 例 12.15】 《实例 文件 : chl2\12.15.html) 


<html> 
<body> 
<div style="text-indent:10mm:"> 
<p style="line-height:S0px"> 
世界 杯 〈《World Cup.FIFA World Cup) ， 国 际 足 联 世界 杯 ， 世 界 足 球 锦标 赛 是 世界 上 最 高 水 平 
的 足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 顶级 赛事 。 
</p> <p style="line-height:50%"> 
世界 杯 (World Cup.FIFA World Cup) ， 国 际 足 联 世界 杯 ， 世 界 足 球 锦标 赛 是 世界 上 最 高 水 平 的 
足球 比赛 ， 与 奥运 会 、F1 并 称 为 全 球 三 大 项 级 赛事 。 


</p> 

</div> 
</body> 
</html> 


在 焉 9.0 中 浏览 效果 如 图 12-15 所 示 ， 可 以 看 到 有 段 文字 重 登 在 一 起 ， 即 行 高 设置 较 小 。 


_ 豆 二 画 


世界 杯 《World Cup, FIFA World Cup) ， 国 际 足 联 世 界 标 ， 世 界 足 球 


锌 标 赛 是 世界 上 最 高 水 平 的 足球 比 硅 ,与 1 并 称 为 全 球 三 大 顶级 
型 事 . 


i 


i 


图 12-15 设 定 文本 行 高 显示 图 
12.2.9 处理 空白 〈white-sapce) 
在 文本 编辑 中 ,网 页 中 有 时 需要 包含 一 些 不 必要 的 制 表 符 、 换 行 符 或 者 额外 的 空白 符 (多 
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于 单词 之 间 的 一 个 标准 的 空格 ) ， 这 些 符号 统称 为 空白 字符 。 通 常情 况 下 希望 忽略 这 些 额 外 的 
空白 字符 。 浏览 器 可 以 自动 完成 此 操作 并 按照 一 种 适合 窗口 的 方式 布置 文本 。 它 会 丢弃 段落 开 
头 和 结尾 处 任何 额外 的 空白 ， 并 将 单词 之 间 的 所 有 制 表 符 、 换 行 和 额外 的 空白 压缩 (合并 ) 成 
单一 的 空白 字符 。 此 外 ， 当 用 户 调整 窗口 大 小 时 ,浏览 器 会 根据 需要 重新 格式 化 文本 以 便 匹 配 
新 的 窗口 尺寸 。 对 于 某 些 元 素 ， 可 能 会 以 某 种 方式 特意 格式 化 文本 以 便 包 含 额外 的 空白 字符 ， 
而 不 希望 抛弃 或 压缩 这 些 字符 。 

在 CSS 中 ，white-space 属性 用 于 设置 对 象 内 空格 字符 的 处 理 方式 。white-space 属性 对 文 
本 的 显示 有 着 重要 的 影响 。 在 标记 上 应 用 white-space 属性 可 以 影响 浏览 器 对 字符 串 或 文本 间 
空白 的 处 理 方式 。 
white-space 属性 语法 格式 如 下 所 示 。 


white-space :normal | pre | nowrap | pre-wrap | pre-line 
其 属性 值 含义 如 表 12-13 所 示 。 
表 12-13 ”空白 属性 表 


默认 。 空 白 会 被 浏览 器 忽略 
| pe | 空白 会 被 浏览 器 保留 。 其 行为 方式 类 似 HTML 中 的 <pre> 标签 


文本 不 会 换行 ， 文 本 会 在 在 同一 行 上 继续 ， 直 到 遇 到 <br> 标签 为 上 


保留 空白 符 序列 ， 但 是 正常 地 进行 换行 
| pre-line 。 ”| 合并 空白 符 序列 ， 但 是 保留 换行 符 
| inherit 。 ”| 规定 应 该 从 父 元 素 继承 white-space 属性 的 什 


【 例 12.16】 实例 文件 :chl2\12.16.html) 


<html> 
<body> 
<hl style="color:red: text-align:center;white-space:pre"> 鸟 鸣 声 里 的 春天 ! </hl> 
<div> 
<p style="white-space:nowrap:text-indent:10mm"> 
一 串 悦 耳 的 鸟 叫 ， 春 天 就 来 了 。<br> 
在 乡村 里 ,在 一 片 一 片 的 庄稼 院 里 ， 最 先 体现 春天 到 来 的 物事 ， 便 是 那 越 来 越 咏 亮 ， 越 来 越 繁 乱 的 鸟 鸣 。 
早晨 里 ， 天 还 未 亮 ， 空 气 还 有 些 几 分 寒冷 ， 一 声 长 长 的 鸟 鸣 ， 便 如 一 支 铜 号 一 般 ， 鸣 鸣 噜 噜 撩 开 了 春天 的 序 
幕 。 于 是 ， 在 湿 渡 渡 的 泥土 气息 里 ， 便 有 各 种 植物 的 种 子 ， 再 也 按 捧 不 住 的 冲动 ， 在 鸟 声 里 ， 嘲 员 员 的 爆 出 
了 嫩 芽 ， 甚 至 急 不 可 耐 地 冲 出 了 士 面 。 
<p> 
<p style="white-space:pre-wrap:text-indent:10mm"> 
紧 接 着 , 黄 栈 开始 委婉 缠绵 的 抒情 ， 如 二 胡 独 奏 曲 中 的 《二 泉 映 月 }》， 如 小 提琴 独奏 曲 中 的 《 梁 
祝 》， 那 么 的 一 咏 三 叹 ， 回 环 往复 ， 直 叫 人 荡气回肠 ， 情 不 自 禁 而 涌 出 满眼 的 热泪 来 。 
在 黄酮 、 百 灵 鸟 的 吟唱 声 中 ， 一 棵 又 一 棵 的 花木 开始 变 绿 ， 一 杂 一 休 的 楼 花 悄然 绽放 ， 而 院 墙 
内 的 那 一 枝 红 杏 ， 早 已 探 出 了 管 秃 墙 外 。<br> 
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黄 酌 方才 唱 罢 ， 在 村 庄 的 上 空 ， 在 树林 子 里 ， 在 人 家 的 土 场 上 ， 一 群 花 喜 竟 便 穿戴 着 黑白 相间 
的 朴素 裙 裙 而 内 亮 登 场 ， 然 后 ， 便 一 天 喜气 的 员 遇 嘻 嘻 ， 员 员 嘻 嘻 叫 起 来 。 
</lp> 
<p style="white-space:pre-line:text-indent:10mm"> 
紧 接 着 ， 黄 酷 开 始 委婉 缠绵 的 抒情 ， 如 二 胡 独 奏 曲 中 的 《二 泉 映 月 》， 如 小 提琴 独奏 曲 
中 的 《梁祝 》， 那 么 的 一 咏 三 叹 ， 回 环 往复 ， 直 叫 人 荡气回肠 ， 情 不 自 禁 而 涌 出 满眼 的 热泪 来 。 
在 黄酮 、 百 灵 鸟 的 吟唱 声 中 ， 一 棵 又 一 棵 的 花木 开始 变 绿 ， 一 杂 一 杂 的 樱花 悄然 绽放 ， 而 院 墙 
内 的 那 一 枝 红 杏 ， 早 已 探 出 了 篇 钨 墙 外 。<br/> 
黄 酌 方才 唱 罢 ， 在 村 庄 的 上 空 ， 在 树林 子 里 ， 在 人 家 的 土 场 上 ， 一 群 花 喜 更 便 穿戴 着 黑白 相间 
的 朴素 裙 裙 而 闪 亮 登场 ， 然 后 ， 便 一 天 喜气 的 员 遇 嘻 嘻 ， 员 员 嘻 嘻 叫 起 来 。 


</p> 
</div> 
</body> 
</html> 
在 正 9.0 中 浏览 效果 如 图 12-16 所 示 ， 可 以 看 到 文字 处 理 空白 的 不 同方 式 。 
(DE |) Avsers Mdministrato\Documents\ P - © x | HUsers Administrator\ | | 
文件 (F) ” 炉 强 (E) ” 王 看 (V) 收藏 实 (A) 工具 (T) 帮助 (H) 


鸟 鸣 声 里 的 春天 ! 


一 串 悦耳 的 鸟 叫 ， 春 天 就 来 了 
在 乡村 里 , 在 一 片 一 "ss “最 先 体现 春天 到 末 的 物事 ， 便 是 屠 越 来 越 中 亮 ， 越 来 越 每 乱 的 鸟 鸣 。 


紧 接 着 ， 黄 酮 开始 委婉 缠绵 的 抒情 ， 如 二 胡 独奏 曲 中 的 《二 泉 映 月 >》 ， 如 小 提琴 独奏 曲 中 的 《 梁 
祝 ， 那 么 的 一 咏 三 吸 ， 回 环 往复 ， 直 叫 人 荡气回肠 ， 情 不 自 禁 而 涌 出 满眼 的 热泪 来 。 在 菁 枫 、 百 灵 
eh 开始 变 绿 ， 一 休 一 休 的 樱花 悄然 绽放 ， 而 院 二 内 的 那 一 枝 红 杏 ， 早 忆 


篇 包 博 
黄酮 方才 唱 轻 ， 在 村 庄 的 上 裕 ， 在 树林 子 里 ， 在 人 这 的 二 的 上 - 群 划 的 便 钙 二 着 黑白 相间 的 朴 妈 禄 
| 袜 而 内 亮 痘 场 ， 然 后 ， 便 一 天 喜气 的 员 员 嘲 嘻 ， 员 有 嘲 嘻 叫 起 来 


bit 如 二 LT 如 小 提琴 独奏 曲 中 的 《 梁 
祝 》， En 回环 往复 ， 直 叫 人 荡气回肠 ， 情 不 自 禁 而 涌 出 满眼 的 热泪 来 。 在 黄 琴 、 百 灵 
后 出外 、 生殖 的 术 开 交 灾 巡 ， 一 休 一 打 的 权 花 情 然 绽放 ， 而 院 墙 内 的 那 一 村 红 杏 ， 早 已 
黄酮 方才 唱 轻 ， 在 村 庄 的 上 空 ， 在 树林 子 里 ， 在 人 过 站 二 二 上 -- 群 花 可 的 便 定 着 黑白 相间 的 朴素 福 
| 记 而 闪 亮 登场， 然后 ， 便 一 天 关 气 的 员 员 于 嘲 ， 遇 员 嘻 哮 叫 


图 12-16 ”处理 空白 显示 
12.2.10 ”文本 反 排 (unicode-bidi 和 direction) 


页 文本 编辑 中 , 通常 英语 文档 的 基本 方向 是 从 左 至 右 。 如 果 文 档 中 某 一 段 的 多 个 部 分 
包含 从 右 至 左 阅读 的 语言 ， 则 该 语言 的 方向 需要 正确 地 显示 为 从 右 至 左 。 此 时 可 以 通过 CSS 
提供 的 两 个 属性 unicode-bidi 和 direction 解决 文本 反 排 的 问题 。 

unicode-bidi 属性 语法 格式 如 下 所 示 。 


unicode-bidi : normal | bidi-override | embed 


其 属性 值 含义 如 表 12-14 所 示 。 
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表 12-14 unicode-bidi 属性 表 


属性 什 | 说 明 

normal 默认 值 。 元 素 不 会 打开 一 个 额外 的 嵌入 级 别 。 对 于 内 联 元 素 ， 隐 式 的 重新 排序 将 跨 元 素 边 
| 界 起 作用 

bidi-override | 与 embed 值 相 同 ， 但 除了 这 一 点 外 : 在 元 素 内 ， 重 新 排序 依照 direction 属性 严格 按 顺序 


进行 。 此 值 蔡 代 隐 式 双向 算法 


embed 元 素 将 打开 一 个 额外 的 榜 入 级 别 。 direction 属性 的 值 指定 嵌入 级 别 。 重 新 排序 在 元 素 内 是 
隐 式 进行 的 


direction 属性 用 于 设 定 文本 流 的 方向 ， 其 语法 格式 如 下 所 示 。 
direction : ltr | rtl | inherit 
其 属性 值 含义 如 表 12-15 所 示 。 

表 12-15 direction 属性 表 


文本 3 


文本 流 从 右 到 左 
3 


【 例 12.17】《 实 例文 件 : ch12\12.17.html) 


性 值 
tr 
1 


<html> 

<head> 

<style type="text/css"> 

a {color:#000:} 

</style> 

</head> 

<body> 

<h3> 纯 CSS 反 转 字符 串 使 用 了 direction 和 unicode-bidi</h3> 
<div style=" direction:rtl: unicode-bidi:bidi-override: text-align:left"> 秋 风 吹 不 尽 ， 总 是 玉 关 情 。 
</div> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 12-17 所 示 ， 可 以 看 到 文字 以 反 转 形式 显示 。 


CSS 字体 与 段落 属性 钊 12 党 


| HAUsersAdminist DP ~- CX 


愿 HiUsers\Administr.. x 


文件 月 ” 久 名 (E) ”可 看 (V) ”收藏 夫 (A) 工具 mm) 


帮助 (H) 


纯 CSS 反 转 字符 串 使 用 了 direction 和 unicode-bidi i 
。 情 关 玉 是 总 ， 尽 不 吹风 秋 


图 12-17 文本 反 转 显示 
12.4 ”综合 实例 一 一 网 页 简单 图 文 混 排 


在 一 个 网 页 新 闻 中 ， 出 现 最 多 就 是 文字 和 图 片 ， 二 者 放 在 一 起 ,图文并茂 ,才能 够 生动 地 
表达 新 闻 主 题 。 本 实例 将 利用 前 面 介绍 的 文本 和 段落 属性 , 创建 一 个 图 片 的 简单 混 排 。 复杂 的 
图 片 混 排 会 在 后 面 介绍 。 具 体 步骤 如 下 所 示 。 


本 综合 实例 的 要 求 如 下 : 在 网 页 的 最 上 方 显示 出 标题 ， 标 题 下 方 是 正文 , 在 正文 显示 部 分 
显示 图 片 。 在 设计 这 个 网 页 标题 时 ， 其 方法 同上 面 的 实例 相同 。 上 述 要 求 使 用 CSS 样式 属性 
实现 。 其 实例 效果 如 图 12-18 所 示 。 


四 月 秋 语 ， 演 绎 别 类 西海 情 综 


自从 高 开 以 后 ， 从 此 就 于 了 温 尝 。 等 特 在 这 备 sa 允 洒 风机 作 旧 。 一 疯 和 到 边 ， 风 入 
教 的 险 。 等 不 到 丁 竺 天际 前 著 ， 无 言 关东 
南昌 的 候 岛 飞 得 那么 远 ， 爱 像 风 年 断 了 线 , 和 
从 高 原 雪 赔 化 之 后 委 示 的 孤 古 ， 妥 再 闪 以 
EE 


一 普 读 兰 汗 信 之 歌 诈 ， 扶 名 
行 。 于 每 一 个 天 清 的 夜 哆 ， 


me 入 经 别 本寺 和 


心 威 咸 ， 泪 威 


沉重 的 第 时 近 续 歌词 的 大蒜 ， 眼 芷 花 ， 


12-18 ”图 文 混 排 效果 

to3 分 析 布局 并 构建 HIML。 

首先 需要 创建 一 个 HIML 页 面 ， 并 用 DIV 将 页 面 划 分 为 两 个 层 ， 
个 是 正文 部 分 。 


一 个 是 网 页 标题 层 ， 一 
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to3 导入 CSS 文件 。 


将 CSS 文件 使 用 link 方式 导入 到 HITML 页 面 中 .此 CSS 页 面 定义 了 这 个 页 面 的 所 有 样式 ， 
其 导入 代码 如 下 所 示 : 

<link href="12-19.css" rel="stylesheet" type= "text/css" /> 

(04| 完成 标题 部 分 。 

首先 设置 网 页 标题 部 分 ， 创 建 一 个 div， 用 来 放置 标题 。 其 HTML 代码 如 下 所 示 : 

<div> 

<h1> 四 月 秋 语 ， 演 绎 别 类 西海 情缘 </h1> 

</div> 

在 CSS 样式 文件 中 ， 修 饰 HTML 元 素 ， 其 CSS 代码 如 下 所 示 : 

hl {text-align:center:;text-shadow:0.1em 2px 6px blue:font-size:18px:} 

05) 完成 正文 和 图 片 部 分 . 

下 面 设置 网 页 正文 部 分 ， 正 文中 包含 了 一 个 图 片 。 其 HTML 代码 如 下 所 示 : 

<div> 

<p> 自 你 离开 以 后 ， 从 此 就 丢 了 温柔 。 等 待 在 这 雪山 路 漫长 ， 听 寒 风 呼啸 依旧 。 一 眼 望 不 到 边 ， 风 似 刀 
割 我 的 脸 。 等 不 到 西海 天 际 蔚蓝 ， 无 言 着 苍茫 的 高 原 。 还 记得 你 答应 过 我 不 会 让 我 把 你 找 不 见 ， 可 你 跟随 那 
南 归 的 候鸟 飞 得 那么 远 ， 爱 像 风 移 断 了 线 ， 拉 不 住 你 许 下 的 诺言 。 我 在 苦 苦 等 待 雪 山 之 赂 温暖 的 春天 ， 等 待 
高 原 冰雪 融化 之 后 归来 的 孤雁 ， 爱 再 难以 续 情 缘 ， 回 不 到 我 们 的 从 前 ----- 四 月 秋 语 ， 演 绎 别 类 西海 情缘 。 

</p><p> 一 首 凄 婉 深 情 之 歌谣 ， 扰 乱 了 晚 春 数 日 之 心绪 。 沉 重 的 笔墨 延续 歌词 的 翡 哀 ， 眼 茫茫 ， 心 威 威 ， 
泪 成 行 。 于 每 一 个 孤 清 的 夜晚 ， 在 松软 的 枕 上 汪 汇 成 深 潭 ! </p> 

<DIV class="im"> 

<img src=" 图 01.jpg"> 

</DIV> 

<p> 自 你 离开 以 后 ， 从 此 就 丢掉 了 笑颜 。 等 待 ， 在 这 春暖 花 开 的 季节 ， 听 候鸟 南 归 ， 看 春花 烂漫 。 路 漫 
长 ， 却 依然 望 不 到 心中 那 抹 湛蓝 。 一 望 无 起 的 天 际 ， 呈 现 灰 蒙蒙 一 片 ， 荡 凉 了 心里 所 有 的 期 许 和 祈 盼 ! 流年 
的 秋季 ， 离 别 的 场景 ， 还 一 一 浮现 于 眼前 。 萧 瑟 的 秋风 吹 散 所 有 的 缠 缠 绵绵 ， 枫 叶 飘 飘 ， 落 英 缤纷 ， 掩 盖 了 
一 地 的 心 碎 ! 看 着 愈 渐 模 糊 的 背影 ， 欲 想 挽留 却 泛 发 无 力 ， 泪 滑落 ， 心 凄然 ! 任凭 其 颤 颤 说 说 的 身影 就 这 样 
渐 行 渐 远 … 

sp 

</div> 

CSS 样式 代码 如 下 所 示 : 


p{text-indent:8mm:line-height:7mm:} 
.im {width:300px: float:left: border:#000000 solid 1px:} 
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12.5 ”专家 解 惑 


1. 某 些 字体 为 什么 在 别 的 电脑 上 不 显示 ? 


楷体 很 漂亮 ,， 草书 也 不 逊色 于 宋体 。 但 不 是 所 有 人 的 电脑 都 安装 了 这 些 字体 。 所 以 在 设计 
网 页 时 ， 不 要 为 了 追求 漂亮 美观 ， 而 采用 一 些 比较 新 奇 的 字体 。 有 时 这 样 往往 达 不 到 效果 。 用 
最 基本 的 字体 ， 是 最 好 的 选择 。 

不 要 使 用 难于 阅读 的 花哨 字体 。 当 然 ， 某 些 字体 可 以 让 网 页 精彩 纷呈 。 不 过 它们 容易 阅读 
吗 ? 网 页 的 主要 目的 是 传递 信息 并 易于 读者 阅读 , 我 们 应 该 让 读者 阅读 过 程 舒 服 些 。 不 要 使 用 
小 号 字体 ， 虽 然 Firefox 浏览 器 有 放大 功能 ， 但 如 果 必 须 放 大 才能 看 清 一 个 网 站 的 话 ， 以 后 读 
者 就 再 也 不 会 去 访问 它 了 。 

2. 网 页 中 的 空白 处 理 吗 ? 


注意 不 留 空白 。 不 要 用 图 像 、 文 本 和 不 必要 的 动画 来 充斥 网 页 ， 即 使 有 足够 的 空间 , 在 设 
计时 也 应 该 避免 使 用 。 

3. 文字 和 图 片 导航 速度 谁 快 呢 ? 

通常 使 用 文字 做 导航 栏 。 文 字 导航 不 仅 速度 快 ， 而 且 更 稳定 。 例 如 ， 有 些 用 户 上 网 时 会 关 
闭 图 片 。 在 处 理 文本 时 ， 除 非特 别 需要 ， 和 否则 不 要 为 普通 文字 添加 下 划 线 。 因 为 用 户 需 要 识别 
哪些 文字 能 够 点 击 。 


第 13 章 
< 用 CSs 美 化 图 片 ， 


网 页 中 如 果 都 是 文字 , 会 给 浏览 者 枯燥 的 感觉 而 一 张 恰 如 其 分 的 图 片 , 会 为 网 页 带 来 许 
多 生 趣 。 图 片 是 直观 、 形 象 的 ， 一 张 好 的 图 片 会 给 网 页 带 来 很 高 的 点 击 率 。 在 CSS 中 ， 定 义 
了 用 来 美化 和 设置 图 片 的 很 多 属性 。 


13.1 ”修饰 图 片 
如 果 将 多 张 图 片 直接 放置 到 网 页 中 ， 而 不 加 修饰 ， 会 给 人 一 种 凌乱 的 感觉 。 通 过 CSS 局 
性 统一 管理 ， 可 以 定义 多 张 图 片 的 各 种 属性 ， 例 如 图 片 边框 、 图 片 大 小 和 缩放 。 
13.1.1 图片 边 框 


在 网 页 中 放置 一 张 图 片 时 ， 可 以 使 用 <img> 标 记 ， 在 第 2 章 中 已 经 介绍 过 了 。 当 图 片 显示 
之 后 ， 其 边框 是 否 显 示 ， 可 以 通过 <img> 标 记 中 的 描述 标记 border 来 设 定 。 其 示例 代码 为 : 


<img src="yueji.jpg" border="3"> 

通过 HTML 标记 设置 图 片 边框 ， 其 边框 显示 都 是 黑色 的 ， 并 且 风 格 比较 单一 ， 唯 一 能 够 
设 定 的 就 是 边框 的 粗细 ， 而 对 边框 样式 基本 上 无 能 为 力 。 这 时 可 以 采用 CSS 对 边框 进行 美化 。 

在 CSS 中 ， 可 以 使 用 border-style 属性 定义 边框 样式 ， 即 边框 风格 。 例 如 可 以 将 边框 风格 
设置 为 点 线 式 边框 (dotted)、 破 折线 式 边 框 (dashed)、 直 线 式 边框 (solid)、 双 线 式 边框 (do 
uble) 等 。 


【 例 13.1】〔 实 例文 件 ，ch13\13.1.html) 


<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="yueji.jpg" border="3" style="border-style:dotted"> 
<img src="yueji.jpge" border="3" style="border-style:dashed"> 
</body> 

</html> 
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在 正 9.0 中 浏览 效果 如 图 13-1 所 示 ， 可 以 看 到 网 页 中 显示 了 两 张 图 片 ， 其 边框 分 别 为 点 
线 式 和 破 折 线 式 。 

另外 ， 如 果 需 要 单独 定义 边框 一 边 的 样式 ， 可 以 使 用 border-top-style 设 定 上 边框 样式 、 
border-right-style 设 定 右边 框 样式 、border-bottom-style 设 定 下 边框 样式 和 border-left-style 设 定 
左边 框 样式 。 

【 例 13.2】 实例 文件 ，ch13\13.2.html) 


<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="yueji.jpg" border="3" style="border-top-style:dotted:border-right-style:insert'border-bottom- 
style:dashed:border-left-style:groove"> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 13-2 所 示 ， 可 以 看 到 网 页 显示 了 一 张 图 片 ， 图 片 的 上 边框 、 下 
边框 、 左 边框 和 右边 框 分 别 以 不 同样 式 显示 。 


图 13-1 边框 显示 图 13-2 4 种 样式 边框 显示 


13.1.2 ”图 片 缩放 

在 网 页 上 显示 一 张 图 片 时 , 默认 情况 下 都 是 以 图 片 的 原始 大 小 显示 。 如 果 要 对 网 页 进行 排 
版 , 通常 情况 下 ， 还 需要 对 图 片 大 小 进行 重新 设 定 。 对 于 图 片 大 小 的 设 定 ， 可 以 采用 3 种 方式 
完成 。 

1. 使 用 描述 标记 width 和 height 

在 HTML 标记 语言 中 ,通过 img 的 描述 标记 height 和 width 可 以 设置 图 片 大 小 。width 和 
height 分 别 表 示 图 片 的 宽度 和 高 度 ， 其 中 二 者 可 以 是 数值 或 百分比 ， 单 位 可 以 是 像素 。 需 要 注 
意 的 是 高 度 属性 heigth 和 宽度 属性 width 的 设置 要 求 相 同 。 

【 例 13.3】《 实 例文 件 : ch13\13.3.html) 
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<html> 

<head> 

<title> 图 片 边框 </title> 

</head> 

<body> 

<img src="feng.jpe" width=200 height=120> 
</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 13-3 所 示 ， 可 以 看 到 网 页 中 显示 了 一 张 图 片 ， 其 宽度 为 200 像 


素 ， 高 度 为 120 像素 。 


| 各 HAusersadminis P ~ cx EE 
文件 (月 ” 编 强 (E) ” 襄 看 (V) 收藏 夫 (A) 工具 MT 二 


] 


13-3 ”使 用 HTML 标记 设 定 图 片 大 小 
2. 使 用 max-width 和 max-height 


max-width 和 max-height 分 别 用 来 设置 图 片 宽 度 最 大 值 和 高 度 最 大 值 。 在 定义 图 片 大 小 时 ， 


如 果 图 片 默认 尺寸 超过 了 定义 的 大 小 ,那么 就 以 max-width 所 定义 的 宽度 值 显示 , 而 


图 片 高 度 


将 同比 例 变化 ， 如 果 定 义 的 是 max-height， 依 此 类 推 。 但 是 如 果 图 片 的 尺寸 小 于 最 大 宽度 或 者 
高 度 ， 那 么 图 片 就 按 原 尺寸 大 小 显示 。max-width 和 max-height 的 值 一 般 是 数值 类 型 。 


其 语法 格式 如 下 所 示 : 
img{ 
max-height:180px: 
由 
【 例 13.4】 《实例 文件 : ch13\13.4.html) 


<html> 

<head> 

<title> 图 片 边框 </title> 

<style> 

img{ 
max-height:180px: 


"200。 
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} 

</style> 

</head> 

<body> 

<img src="feng.jpe" > 

</body> 

</html> 

在 正 9.0 中 浏览 效果 如 图 13-4 所 示 , 可 以 看 到 网 页 中 显示 了 一 张 图 片 , 其 显示 高 度 是 120 

像素 ， 宽 度 将 做 同比 例 缩放 。 


“= 


ESJGIahwewnnaep-cxlsaroe «| | 区 


图 13-4 同比 例 缩放 图 片 
在 本 例 中 ， 也 可 以 只 设置 max-width 来 定义 图 片 最 大 宽度 ， 而 让 高 度 自动 缩放 。 
3. 使 用 width 和 height 属性 


在 CSS 中 ， 可 以 使 用 属性 width 和 height 来 设置 图 片 宽 度 和 高 度 ， 从 而 达到 图 片 的 缩放 


效果 。 
【 例 13.5】 (实例 文件 : ch13\13.5.html) 


<html> 

<head> 

<title> 图 片 边框 </tide> 

</head> 

<body> 

<img src="feng.jpe" > 

<img src="feng.jpe" style="width:90px:height:100px" > 
</body> 

</html> 


2 
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在 正 9.0 中 浏览 效果 如 图 13-5 所 示 ， 可 以 看 到 网 页 中 显示 了 两 张 图 片 ， 第 一 张 图 片 以 原 
大 小 显示 ， 第 二 张 图 片 以 指定 大 小 显示 。 


图 13-5 使 用 CSS 指定 图 片 大 小 


纵横 比例 缩放 ,如 果 只 设置 了 height 属 性 也 是 同样 的 道理 .只 有 当 同 时 设置 了 width 


国 当 仅 仅 设置 了 图 片 的 width 属性 ， 而 没有 设置 height 属性 时 ， 图 片 本 身 会 自 | 
L 和 height 属性 时 才 会 不 等 比例 缩放 。 


13.2 ”对 齐 图 片 


一 个 凌乱 的 图 文 网 页 是 每 一 个 浏览 者 都 不 喜欢 看 到 的 。 而 一 个 图 文 并 茂 、 排 版 整洁 的 页 面 ， 
更 容易 让 网 页 浏览 者 接受 。 可 见 ， 图 片 的 对 齐 方式 是 非常 重要 的 。 


13.2.1 横向 对 齐 方式 


所 谓 图 片 横向 对 齐 ， 就 是 在 水 平方 向 上 进行 对 齐 ， 其 对 齐 方式 和 文字 对 齐 比较 相似 ， 也 是 
有 3 种 对 齐 方式 ， 分 别 为 左 对 齐 、 右 对 齐 和 居中 对 齐 。 

如 果 要 定义 图 片 的 对 齐 方 式 , 不 能 在 样式 表 中 直接 定义 图 片 样式 , 需要 在 图 片 的 上 一 个 标 
记 级 别 ， 即 父 标记 定义 ， 让 图 片 继承 父 标 记 的 对 齐 方式 。 之 所 以 这 样 定义 父 标记 对 齐 方式 ， 是 
因为 图 片 本 身 没有 对 齐 属性 ， 需 要 使 用 CSS 继承 父 标 记 的 text-align 来 定义 对 齐 方式 。 

【 例 13.6】〔 实 例文 件 ，ch13\13.6.html) 


<html> 

<head> 

<title> 图 片 横向 对 齐 </title> 

</head> 

<body> 

<p style="text-align:left"><img src="mudan.jpg" style="max-width:140px:"> 图 片 左 对 齐 </p> 

<p style="text-align:center"><img src="mudan.jpe" style="max-width:140px:"> 图 片 居中 对 齐 </p> 
<p style="text-align:right"><img src="mudan jpg" style="max-width:140px:"> 图 片 右 对齐 </p> 
</body> 


a 
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</html> 


在 下 9.0 中 浏览 效果 如 图 13-6 所 示 ， 可 以 看 到 网 页 上 显示 了 3 张 图 片 ， 大 小 一 样 ， 但 对 
齐 方式 分 别 是 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 


图 13-6 图 片 横向 对 齐 


13.2.2 ”纵向 对 齐 方 式 

纵向 对 齐 就 是 垂直 对 齐 , 即 在 垂直 方向 上 和 文字 搭配 使 用 。 通 过 对 图 片 垂直 方向 上 的 设置 ， 
可 以 设 定 图 片 和 文字 的 高 度 一 致 。 在 CSS 中 ， 对 于 图 片 的 纵向 设置 通常 使 用 vertical-align 属 
性 来 定义 。 

vertical-align 属性 设置 元 素 的 垂直 对 齐 方式 , 即 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 
的 基线 的 垂直 对 齐 方式 。 允 许 指定 负 长 度 值 和 百分比 值 。 这 会 使 元 素 降低 而 不 是 升 高 。 在 表单 
元 格 中 ， 这 个 属性 会 设置 单元 格 框 中 的 单元 格 内 容 的 对 齐 方式 。 其 语法 格式 为 : 

vertical-align : baseline |sub | super |top ltext-top |middle |bottom ltext-bottom llength 

上 面 参数 的 含义 如 表 13-1 所 示 。 

表 13-1 vertical-align 参数 含义 


参数 名 称 说 明 

baseline 支持 valign 特性 的 对 象 的 内 容 与 基线 对 齐 

sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文本 的 上 标 

top 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 顶端 对 齐 

text-top 将 支持 valign 特性 的 对 象 的 文本 与 对 象 顶端 对 齐 

middle 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 

bottom 将 支持 valign 特性 的 对 象 的 文本 与 对 象 底 端 对 齐 

text-bottom ”| 将 支持 valign 特性 的 对 象 的 文本 与 对 象 项 端 对 齐 

length 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 百分数 。 可 为 负数 。 定 义 由 基线 算 起 的 偏 移 量 。 
基线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0% 
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【 例 13.7】 实例 文件 : ch13\13.7.html) 


<html> 
<head> 
<title> 图 片 纵向 对 齐 </title> 
<style> 
img{ 
max-width:100px: 
} 
</style> 
</head> 
<body> 
<p> 纵 向 对 齐 方 式 :baseline<img src=mudan.jpg style="vertical-align:baseline"></p> 
<p> 纵 向 对 齐 方 式 :bottom<img src=mudan jpg style="vertical-align:bottom"></p> 
<p> 纵 向 对 齐 方式 :middle<img src=mudan.jpg style="vertical-align:middle"></p> 
<p> 纵 向 对 齐 方式 :sub<img src=mudan.jpg style="vertical-align:sub"></p> 
<p> 纵 向 对 齐 方式 :super<img src=mudan.jpg style="vertical-align:super"></p> 
<p> 纵 向 对 齐 方式 :数值 定义 <img strc=mudan.jpg style="vertical-align:20px"></p> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 13-7 所 示 ， 可 以 看 到 网 页 中 显示 了 6 张 图 片 ， 垂 直方 向 上 的 对 
齐 方式 分 别 是 baseline、bottom、middle、sub、super 和 数值 对 齐 。 


Ca 闻 DAB\cho6\67 P ~ C X | 个 四 片 % 和 对齐 x| 


雏 疝 对 齐 方式 :nidal， 


纵向 对 齐 方式 : 3 


鲁 
纵向 对 齐 方式 :super 
省 


外 向 对 齐 方式 :数值 定义 


图 13-7 ”图片 纵向 对 齐 
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13.3 图 文 混 排 


一 个 普通 的 网 页 最 常见 的 方式 就 是 图 文 混 排 ,文字 说 明 主题 ， 图 像 显示 情境 ， 二 者 相 得 益 
彰 。 本 节 将 介绍 图 片 和 文字 的 排版 方式 。 


13.3.1 文字 环绕 


在 网 页 中 进行 排版 时 ， 可 以 将 文字 设置 成 环绕 图 片 的 形式 ， 即 文字 环绕 。 文字 环绕 应 用 非 
常 广泛 ， 如 果 再 配合 背景 可 以 达到 绚丽 的 效果 。 

在 CSS 中 ， 可 以 使 用 float 属性 定义 该 效果 。float 属性 主要 定义 元 素 在 哪个 方向 浮动 。 一 
般 情况 下 , 这 个 属性 总 应 用 于 图 像 , 使 文本 围绕 在 图 像 周围 , 有 时 它 也 可 以 定义 其 他 浮动 元 素 。 
浮动 元 素 会 生成 一 个 块 级 框 , 不 论 它 本 身 是 何 种 元 素 。 如 果 浮 动 非 蔡 换 元 素 , 则 要 指定 一 个 明 
确 的 宽度 ; 否则 ， 它 们 会 相当 窄 。 

float 属性 的 语法 格式 如 下 所 示 : 


float : none | left |right 


其 中 none 表示 默认 值 对 象 不 漂浮 ，left 表示 文本 流向 对 象 的 右边 ，right 表示 文本 
I 流向 对 象 的 左边 。 


【 例 13.8】 (实例 文件 :ch13\13.8.html) 


<html> 

<head> 

<title> 文 字 环 绕 </title> 

<style> 

img{ 

max-width:120px: 
float:left: 

} 

</style> 

</head> 

<body> 

> 

一 个 可 爱 的 小 家 伙 乘 着 风 儿 顽皮 地 落 在 了 我 的 肩 上 ， 我 低头 看 了 看 ， 原 来 是 一 片 枫叶 。 

<img src="fengye.jpg"> 

我 小 心 翼 贾 地 把 它 捧 在 手中 ， 一 阵风 儿 吹 过 ， 叶 子 的 几 个 小 尖 脚 随 风 摆 起 ， 多 像 婴 儿 的 小 手掌 啊 ! 平滑 
的 叶 面 ， 清 晰 的 脉络 ， 十 分 柔软 细嫩 。 枫 叶 树 种 在 秋冬 的 时 候 ， 体 内 会 产生 一 些 化 学 反应 ， 让 原本 树叶 中 所 
会 枫叶 (10 张 ) 的 物质 或 部 份 组 织 分 解 之 后 ， 回 收 储藏 在 茎 或 根 的 部 位 ， 来 年 春天 的 时 候 可 以 再 利用 ， 叶 绿 体 、 
叶绿素 就 是 被 分 解 回收 的 对 象 之 一 ， 因 为 叶绿素 的 含量 较 大 而 遮盖 了 其 他 颜色 ， 使 叶片 呈 绿 色 。 因 此 当 叶 子 
里 的 叶绿素 没有 了 的 时 候 ， 其 他 色素 的 颜色 彰显 出 来 ， 如 花 青 素 的 红色 、 胡 萝卜 素 的 黄色 和 叶 黄 素 的 黄色 等 。 
除 此 之 外 ， 枫 叶 中 贮存 的 糖分 还 会 分 解 转变 成 花 青 素 ， 使 叶片 的 颜色 更 加 艳丽 、 火 红 。 枫叶 没有 五 个 "手指 " 
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就 不 是 枫叶 ,而 且 ， 枫 叶 的 “五 指 ” 上 具有 锯齿 ， 这 是 枫叶 的 特色 ! 

</p> 

</body> 

</html> 

在 正 9.0 中 浏览 效果 如 图 13-8 所 示 ， 可 以 看 到 图 片 被 文字 所 环绕 ， 并 在 文字 的 左 方向 显 
示 。 如 果 将 float 属性 的 值 设置 为 right， 其 图 片 会 在 文字 右 方 显示 并 环绕 。 


| Hvsersadministrator 只 - © x | 半 文 =F 疾 
文件 (F】 法 济 E)】 过 者 (V) 收 宕 闪 (A] 工具 (D 大 动 (H) 
一 个 可 爱 的 小 家 伙 乘 着 风 儿 奖 皮 地 落 在 了 我 的 崩 上 ， 我 低头 看 了 看 ， 原 来 是 一 片 


枫叶 。 我 小 心 纲 届 地 把 它 摔 在 手中 ， 一 阵风 儿 吹 过， 叶子 的 几 个 小 尖 脚 随 风 摆 
国 起 ， 多 像 要 儿 的 小 于 学 
的 叶 面 ， 清 晰 


呈 绿 色 。 (eA 其 他 全 村 的 显 出 来 ， 如花 
红色 、 胡 萝卜 素 的 黄色 和 叶 黄 素 的 黄 枫叶 中 贮存 的 糖分 
转变 成 伦 青 素 ， 的 了 是 1 和 枫叶 没有 五 个 "手指 就 

不 是 损 叶 ， 而 且 , 枫叶 的 “五 指 ” 上 具有 锯齿 ， ee 


13-8 ”文字 环绕 效果 
13.3.2 ”设置 图 片 与 文字 间距 


如 果 需 要 设置 图 片 和 文字 之 间 的 距离 ， 即 文字 之 间 存 在 一 定 间距 , 不 是 紧 紧 的 环绕 , 可 以 
使 用 CSS 中 的 padding 属性 来 设置 。 

padding 属性 主要 用 来 在 一 个 声明 中 设置 所 有 内 边 距 属性 ， 即 可 以 设置 元 素 所 有 内 边 距 的 
宽度 , 或 者 设置 各 边 上 内 边 距 的 宽度 。 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 会 
延伸 到 其 他 行 , 有 可 能 还 会 与 其 他 内 容重 合 。 元 素 的 背景 会 延伸 穿 过 内 边 距 。 不 允许 指定 负 边 
距 值 。 

其 语法 格式 如 下 所 示 : 


padding :padding-top | padding-right | padding-bottom | padding-left 


其 参数 值 padding-top 用 来 设置 距离 顶部 内 边 距 ，padding-right 用 来 设置 距离 右 部 内 边 距 ; 
padding-bottom 用 来 设置 距离 底部 内 边 距 ，padding-left 用 来 设置 距离 左 部 内 边 距 。 
【 例 13.9】 《实例 文件 :ch13\13.9.html) 


<html> 
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<title> 文 字 环绕 </title> 
<style> 
img{ 
max-width:120px; 
float:left: 
padding-top:10px: 
padding-right:S0px: 
padding-bottom:10px: 
</style> 
</head> 
<body> 
< 
一 个 可 爱 的 小 家 伙 乘 着 风 儿 顽皮 地 落 在 了 我 的 肩 上 ， 我 低头 看 了 看 ， 原 来 是 一 片 枫叶 。 
<img src="fengye.jpg"> 
我 小 心 滤 翼 地 把 它 捧 在 手中 ， 一 阵风 儿 吹 过 ， 叶 子 的 几 个 小 尖 脚 随 风 摆 起 ， 多 像 婴儿 的 小 手掌 啊 ! 平滑 
的 叶 面 ， 清 晰 的 脉络 ， 十 分 柔软 细嫩 。 枫 叶 树种 在 秋冬 的 时 候 ， 体 内 会 产生 一 些 化 学 反应 ， 让 原本 树叶 中 所 
含 枫叶 (10 张 ) 的 物质 或 部 份 组 织 分 解 之 后 ， 回 收 储藏 在 茎 或 根 的 部 位 ， 来 年 春天 的 时 候 可 以 再 利用 ， 叶 绿 体 、 
叶绿素 就 是 被 分 解 回收 的 对 象 之 一 ， 因 为 叶绿素 的 含量 较 大 而 遮盖 了 其 他 颜色 ， 使 叶片 呈 绿 色 。 因 此 当 叶 子 
里 的 叶绿素 没有 了 的 时 候 ， 其 他 色素 的 颜色 彰显 出 来 ， 如 花 青 素 的 红色 、 胡 萝卜 素 的 黄色 和 叶 黄 素 的 黄色 等 。 
除 此 之 外 ， 枫 叶 中 贮存 的 糖分 还 会 分 解 转 变 成 花 青 素 ， 使 叶片 的 颜色 更 加 艳丽 、 火 红 。 枫 叶 没有 五 个 "手指 " 
就 不 是 枫叶 ,而 且 ， 枫叶 的 “五 指 ” 上 具有 锯齿 ， 这 是 枫叶 的 特色 ! 
<p> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 13-9 所 示 ， 可 以 看 到 图 片 被 文字 所 环绕 ， 并 且 文 字 和 图 片 右边 
间距 为 50 像素 ， 上 下 各 为 10 像素 。 
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一 个 可 爱 的 小 家 伙 乖 着 风 儿 顽皮 地 落 在 了 我 的 雇 上 ， 我 低 : 
ae 


， 枫叶 中 巡 存 的 糖 
火红 。 枫叶 没有 五 个 “手指 "就 不 是 枫叶 。 


13-9 设置 图 片 和 文字 边 距 
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13.4 综合 实例 1 一 一 一 句 话 新 闻 


在 各 大 网 站 中 , 点 击 率 最 高 的 就 是 新 闻 ， 人 们 每 天 都 在 不 停 地 浏览 新 闻 。 新 闻 格式 要 求 简 
洁 明 了 , 文字 表达 清楚 , 图文并茂 。 对 于 网 页 新 闻 排版 , 根据 其 新 闻 内 容 , 可 以 有 一 句 话 新 闻 。 
本 实例 将 介绍 如 何 配合 图 片 设计 出 一 句 话 新 闻 的 网 页 版 面 。 其 具体 操作 步骤 如 下 所 示 。 


在 本 实例 中 ,如果 要 显示 一 句 话 新 闻 ， 需 要 包含 两 个 部 分 ,一 个 是 新 闻 标题 ,一 个 是 新 闻 
内 容 ， 新 闻 内 容 可 以 使 用 图 片 和 段落 文字 。 此 处 可 以 使 用 div 将 两 个 部 分 分 成 不 同 的 层次 。 实 
例 完 成 后 ， 其 界面 如 图 13-10 所 示 。 


02 构建 HTML 页 面 。 


既然 页 面 中 包含 了 两 个 部 分 , 可 以 使 用 HTML 中 的 div 标记 进行 层次 划分 。 一 个 div 包含 
整个 一 句 话 新 闻 ， 一 个 div 包含 标题 ， 标 题 可 以 分 为 正 标 题 和 副标题 ， 一 个 div 包含 图 片 和 段 
落 。 其 代码 如 下 所 示 : 


<html> 

<head> 

<title> 时 事 新 闻 </title> 

<style> 

</style> 

</head> 

<body> 

<div> 

<div> 

<p > 英国 皇家 国际 航 展开 幕 </p> 
<p >2011-07-17 09:38 来 源 : 新 华 网 </p> 
</div> 

<div> 

<p align=center> 


<img src=feiji.jpg border=1> 

<p> 

<p> 

7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 在 
费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

</p> 
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在 正 9.0 中 浏览 效果 如 图 13-11 所 示 ， 可 以 看 到 在 网 页 中 显示 了 段落 、 图 片 和 标题 。 


司 bwgHRchoep4P - OX | = 有 


| 英国 皇家 国际 航 展开 幕 


| 克扣 民 雪 昌 在 和 入 
有 有 类 六 开 训 这 是 也 办 上 规 才 朱 大 的 军用 飞机 航空 展 之 一 


了 有 5， 直 芝 机 舍 。- 部 10 区 二 机 寻 们 习 全 者 。 为 2 天 的 生计 到 上 居 
当日 在 外 福 入 空军 基地 开 莱 这 是 世 界 上 权 生 大 的 盏 间 习 机 条 空 记 之 


图 13-10 一 句 话 新 闻 13-11 基本 层次 划分 


3j 添加 CSS 代码 ， 修 饰 整 体 div。 
<style> 

.da {border:#0033FF 1px solid:} 

</style> 

四 4 在 HTML 代码 中 ， 使 用 类 标识 符 指向 da， 如 下 所 示 。 
<div class=da> 

<div> 

<p > 英国 皇家 国际 航 展开 幕 </p> 

<p >2011-07-17 09:38 来 源 : 新 华 网 </p> 
</div> 

<div> 

<p align=center> 

<img src=feiji.jpg border=1> 

<p> 

<p> 


7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 在 
费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

<p> 

</div> 

</div> 

tog 在 还 9.0 中 浏览 效果 如 图 13-12 所 示 ， 可 以 看 到 在 网 页 中 显示 了 一 个 边框 ， 包 围 段 
落 、 图 片 。 

to8j 添加 CSS 代码 ， 修 饰 正 标题 和 副标题 。 


.title {color:blue:font-size:25px:text-align:center} 
.xtitle{ 
text-align:center: 
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font-size: 13px:; 
color:gray: 
, 
0 在 HTML 代码 中 ， 引 用 上 面 两 个 类 标识 符 ， 代 码 如 下 。 
<div class=da> 
<div> 


<p class=title> 英 国 皇 家 国际 航 展开 幕 </p> 

<p class=xtitle>2011-07-17 09:38 来 源 : 新 华 网 </p> 

</div> 

<div> 

<p align=center> 

<img src=feijijpg border=1> 

<p> 

<p> 

7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 在 
费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

<p> 

</div> 

</div> 


t08j 在 IE 9.0 中 浏览 效果 如 图 13-13 所 示 ， 可 以 看 到 在 网 页 中 正 标题 和 副标题 都 居中 显 
示 ， 并 且 正 标题 以 蓝 色 显示 ， 大 小 为 25 像素 ， 副 标题 以 灰色 显示 ， 大 小 为 13 像素 。 


[Ron P -0X| 可 5 四 全 宜昌 | rn i | 
村 一 
国 征订 国际 航 展开 天 
lol1-07-L7 09:38 来 源 ， 新 华 网 英国 皇 衣 国 际 航 展开 幕 


AF, 


ee 


的 国 际 上 局 
有 在 我 咎 性 千 宇 军 到 地 开幕， 这 是 世界 上 规 要 肥大 约 罕 用 机关 空 属 之 


Rt ey ees Ech 
旧 在 加尔 福 伯 议 宇 基 地 开 夭 ， 这 从 生 忆 i 展 之 一 


图 13-12 CSS 整体 修饰 图 13-13 ”修饰 标题 
to9j 添加 CSS 代码 ， 修 饰 图 片 ， 代 码 如 下 。 


img{ 
border-top-style:solid: 
border-right-style:dashed: 
border-bottom- style:solid: 
border-left-style:dashed: 
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} 


因 0 此 处 使 用 了 标签 标识 符 , 直接 作用 于 网 页 中 的 图 片 , 此 处 就 不 再 显示 HIML 代码 了 。 
在 下 9.0 中 浏览 效果 如 图 13-14 所 示 ， 可 以 看 到 在 网 页 中 图 片 边框 显示 了 不 同样 式 ， 上 下 以 直 
线 显示 ， 左 右 以 破 折线 显示 .。 

四 添加 CSS 代码 ， 修 饰 段落 ， 代 码 如 下 。 


<p style="text-indent:10mm:font-size:15px:"> 

7 月 16 日 ， 在 英国 的 费 尔 福 德 ， 一 架 A-10 攻击 机 进行 飞行 表演 。 为 期 2 天 的 英国 皇家 国际 航 展 当日 在 
费 尔 福 德 空军 基地 开幕 ， 这 是 世界 上 规模 最 大 的 军用 飞机 航空 展 之 一 。 

</p> 


ij 在 正 9.0 中 浏览 效果 如 图 13-15 所 示 ， 可 以 看 到 在 网 页 中 段落 缩 进 10mm， 并 且 字 体 
大 小 为 15 像素 。 


英国 皇家 国际 航 展开 莫 


AT 


3 
and a 


月 15 日 ， 夏 区 国 的 关 尔 福 伟 ， 一 梁 4 0 友和 机 这 行 飞行 表 湾 ， 为 天 2 天 的 开国 朱 节 际 抽 展 当 
sy 


图 13-14 ”图片 边 框 样式 修饰 图 13-15 ”修饰 段落 
i 添加 CSS 代码 ， 实 现 虚 线 显示 。 代 码 如 下 。 
为 了 将 标题 和 内 容 进 行 分 隔 ， 可 以 采用 底 边 框 实现 。 其 代码 如 下 所 示 ; 
xiao{fborder-bottom:#CCCCCC 1px dashed:} 
i 在 正 9.0 中 浏览 效果 如 图 13-16 所 示 , 可 以 看 到 在 网 页 中 , 标题 和 内 容 被 一 个 虚线 隔 开 。 


moo 
美国 皇 宗 国 际 航 展开 右 


SS 


和 
| 


13-16 ”虚线 分 隔 


sb 
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进 


学 


起 或 


13.5 ”综合 实例 2 一 一 学 校 宣传 单 
每 年 暑假 时 ， 学 校 招生 就 开始 了 ， 大 量 的 宣传 单 到 处 都 是 。 本 实例 模仿 一 个 学 校 宣传 单 ， 
行 图 文 混 排 ， 从 而 加 深 前 面 学 习 的 知识 。 具 体 步 骤 如 下 所 示 。 
0J 分 析 需 求 。 
本 实例 包含 两 个 部 分 ， 一 个 部 分 是 图 片 信息 ， 介 绍 学 校场 景 ， 一 个 部 分 是 段落 信息 ， 介 绍 
校 历史 和 理念 。 这 两 部 分 都 放 在 一 个 div 中。 实例 完成 后 ， 效 果 如 图 13-17 所 示 。 


他 < Dx 源 KBNch06\6d 及 -C X | 后 学 宣传 间 


图 13-17 宣传 单 效果 图 


3 构建 HTML 网 页 。 
创建 HTML 页 面 ， 页 面 中 包含 一 个 div，div 中 包含 图 片 和 两 个 段落 信息 。 其 代码 如 下 所 


<html > 

<head> 

<title> 学 校 宣传 单 </title> 

</head> 

<body> 

<div> 

<img src="xuexiao.jpg" /><p> 某 大 学 风景 优美 </p><p> 学 校 发 扬 “ 百 折 不 挠 、 艰 苦 创 业 ” 的 办 学 传 

， 坚 持 “ 质 量 立 校 、 人 才 兴 校 、 创 新 强 校 、 文 化 铸 校 、 和 谐 荣 校 ” 的 办 学 理念 ， 弘 扬 “ 爱 国 荣 校 、 民 主 和 
、 求 真 务实 、 开 放 创 新 ”的 精神 </p> 

</div> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 13-18 所 示 ， 可 以 看 到 在 网 页 中 标题 和 内 容 被 一 个 虚线 隔 开 。 
to3j 添加 CSS 代码， 修饰 div。 


<style> 


A 
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</style> 
在 HTML 代码 中 ， 将 big 引用 到 div 中 ， 代 码 如 下 所 示 : 
<div class=big> 
<img src="xuexiaojpg" /><p> 某 大 学 风景 优美 </p><p> 学 校 发 扬 “ 百 折 不 挠 、 艰 苦 创业 ”的 办 学 传 
统 ， 坚 持 “质量 立 校 、 人 才 兴 校 、 创 新 强 校 、 文 化 铸 校 、 和 谐 荣 校 ” 的 办 学 理念 ， 弘 扬 “ 爱 国 荣 校 、 民 主 和 


谐 、 求 真 务实 、 开 放 创新 ”的 精神 </p> 
</div> 


在 正 9.0 中 浏览 效果 如 图 13-19 所 示 ， 可 以 看 到 在 网 页 中 段落 以 块 的 形式 显示 。 


Cory 


PE ER, ME ME a A eV  e 的 、 妇 六 字 信守“ 二 过 人才 
AT 2 证、 和 二 ”的 3 帮手 “ 委 网 导 、 民 


13-18 HTML 页 面 显 示 13-19 修饰 div 层 

四 弛 添加 CSS 代码 ， 修 饰 图 片 。 
img{ 

width:260px: 

height:220px: 

border:#009900 2px solid: 

float:left: 

padding-right:0.Spx: 
上 


在 正 9.0 中 浏览 效果 如 图 13-20 所 示 ， 可 以 看 到 在 网 页 中 图 片 以 指定 大 小 显示 ， 并 且 带 有 
边框 ， 左 面 进 行 浮动 。 
tog 添加 CSS 代码 ， 修 饰 段落 。 
p{ 
font-family:" 宋 体 ": 


font-size:14px: 
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line-height:20px: 
} 


在 下 9.0 中 浏览 效果 如 图 13-21 所 示 ， 可 以 看 到 在 网 页 中 段落 以 宋体 显示 ， 大 小 为 14 像 
素 ， 行 高 为 20 像素 。 


SO osmoe po- cx] 局 FpEkse “lea 
| 大字 人 t 美 J 
| 字 村 发 祈 “ 百 折 不 找 、 台 天 加 
| 业 ” 的 办 字 医 鲍 ， 坚持 “质量 立 
校 、 人 也 汪 核 、 间 了 蝇 杭 、 文 化 
| 污 村、 和 请 荣 核 ”的 四 学 理念 ， 
| 纪 扬 “更 国 池 核 ,民主 和 背 、 求 
站务 实 、 开 动人 新" 的 椅 神 
| 天、 开 训 aI 亲 ”的 入神 
13-20 修饰 图 片 13-21 ”修饰 段落 


1. 网 页 进行 图 文 排版 时 ， 哪 些 是 必须 要 做 的 ? 


在 进行 图 文 排版 时 ， 通 常 有 下 面 5 个 方面 需要 网 页 设计 者 考虑 。 
(1) 首 行 缩 进 ， 段落 的 开头 应 该 空 两 格 ，html 中 空格 键 不 起 作用 。 当 然 ， 可 以 用 nbsp; 
来 代替 一 个 空格 ， 但 这 不 是 理想 的 方式 ， 可 以 用 CSS 中 的 首 行 缩 进 ， 其 大 小 为 2em。 


(2) 图 文 混 排 : 在 CSS 中 ， 可 以 用 float， 让 文字 在 没有 清理 浮动 的 时 候 显 示 在 图 片 以 外 
的 空白 处 。 


(3) 设置 背景 色 : 设置 网 页 背景 ， 增 加 效果 。 此 内 容 会 在 后 面 介 绍 。 
(4) 文字 居中 : 可 以 使 用 CSS 的 text-align 属性 设置 文字 居中 。 
(5) 显示 边框 :通过 border 为 图 片 添加 一 个 边框 。 


2. 设置 文字 环绕 时 ，float 元 素 为 什么 失去 作用 ? 


很 多 浏览 器 在 显示 未 指定 width 的 float 元 素 时 会 有 错误 。 所 以 不 管 float 元 素 的 内 容 如 何 ， 
一 定 要 为 其 指定 width 属性 。 


“214 。 


第 14 章 
必 用 CSSi& 置 背景 与 边框 > 


浏览 页 面 时 , 首先 映 入 眼帘 的 就 是 网 页 的 背景 色 和 基调 , 不 同类 型 的 网 站 有 不 同 背 景 和 基 
调 。 因 此 页 面 中 的 背景 通常 是 网 站 设计 时 一 个 重要 的 步骤 。 对 于 单个 HTML 元 素 ， 可 以 通过 
CSS 属性 设置 元 素 边框 样式 ， 包 括 宽度 、 显 示 风 格 和 颜色 等 。 


14.1 设置 背景 


背景 是 网 页 设计 时 的 重要 因素 之 一 ， 一 个 背景 优美 的 网 页 ， 总 能 吸引 不 少 访问 者 。 例 如 ， 
喜庆 类 网 站 都 是 以 火红 背景 为 主题 ，CSS 的 强大 表现 功能 在 背景 方面 同样 发 挥 得 淋 沉 尽 致 。 


14.1.1 背景 颜色 


background-color 属性 用 于 设 定 网 页 背景 色 , 同 设置 前 景色 的 color 属性 一 样 ， 该 属性 接受 
任何 有 效 的 颜色 值 ， 而 对 于 没有 设 定 背 景色 的 标记 ， 默 认 背 景色 为 透明 (transparent)。 
其 语法 格式 为 : 


{background-color : transparent | color} 


关键 字 transparent 是 个 默认 值 , 表示 透明 。 背景 颜色 color 的 设 定 方法 可 以 采用 英文 单词 、 
二 六 进 制 、RGB 等 颜色 单位 。 
【 例 14.1】 《实例 文件 : chl4\14.1html) 


<html> 
<head> 
<title> 背 景色 设置 </title> 
<head> 
<body style= "background-color:PaleGreen: color:Blue"> 
<p> 
background-color 属性 设置 背景 色 ，color 属性 设置 字体 颜色 ， 即 前 景色 。 
</p> 
</body> 
</html> 


精 移 HTML+CSS 网 页 布局 与 样式 〈 视 频 教学 版 7 


在 正 9.0 中 浏览 效果 如 图 14-1 所 示 ， 可 以 看 到 网 页 背景 色 显示 浅 绿色 ， 而 字体 颜色 为 蓝 
色 。 注 意 ， 在 设计 网 页 时 ， 背 景色 不 要 使 用 太 艳 的 颜色 ， 和 否则 会 给 人 一 种 哈 宾 夺 主 的 感觉 。 


Fe 
ol 


FT 局 ] EN 精 通 HTML+CSS 只 - Ci X | 愿 青 县 色 设 下 x | 


文件 (Fi ” 编 强 (E) ”可 看 (V) ” 收 茂 夫 (A) 工具 [TD) 帮助 (H) 


14-1 设置 背景 色 


background-color 不 仅 可 以 设置 整个 网 页 的 背景 颜色 , 还 可 以 设置 指定 HTML 元 素 的 背景 
色 ， 例 如 设置 hl 标题 的 背景 色 、 设 置 段落 p 的 背景 色 。 在 一 个 网 页 中 ， 可 以 根据 需要 设置 不 
同 HTML 元 素 的 背景 色 。 
【 例 14.2】 《实例 文件 : chl4\14.2.html) 


<html> 

<head> 
<title> 背 景色 设置 </title> 
<style> 

hlt{ 


p{ 


<body> 
<h1> 颜 色 设置 </h1> 


> 
background-color 属性 设置 背景 色 ，color 属性 设置 字体 颜色 ， 即 前 景色 。 
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</html> 


在 下 9.0 中 浏览 效果 如 图 14-2 所 示 ， 可 以 看 到 网 页 中 标题 区 域 背景 色 为 红色 ， 段 落 区 域 
背景 色 为 灰色 ， 并 且 分 别 为 字体 设置 了 不 同 的 前 景色 。 


| 全 [DD ews vcssm! P - 6 x |@ ses x 


文件 (六 名作 豆 理 (V) 收 训 夫 (A)】 工具 (]。 帮助 H) 


图 14-2 设置 HTML 元 素 背 景色 
14.1.2 ”背景 图 片 


网 页 中 不 但 可 以 使 用 背景 色 来 填充 网 页 背景 ， 同 样 也 可 以 使 用 背景 图 片 。 通 过 CSS 属性 
可 以 对 背景 图 片 进行 精确 定位 。 background-image 属性 用 于 设 定 标记 的 背景 图 片 , 通常 情况 下 ， 
在 标记 <body> 中 应 用 该 属性 可 将 图 片 用 于 整个 主体 中 。 

background-image 语法 格式 如 下 所 示 : 


background-image : none | url (url) 


其 默认 属性 是 无 背景 图 ， 当 需要 使 用 背景 图 时 可 以 用 url 进行 导入 ， 可 以 使 用 绝对 路 径 ， 
也 可 以 使 用 相对 路 径 。 
【 例 14.3】 “实例 文件 :chl4\14.3.html) 


<html> 

<head> 

<title> 背 景色 设置 </title> 

<style> 

body{ 
background-image:url(xiyang.jpg) 


<p> 夕 阳 无 限 好 </p> 
</body> 
</html> 
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在 正 9.0 中 浏览 效果 如 图 14-3 所 示 ， 可 以 看 到 网 页 中 显示 背景 图 ， 但 如 果 图 片 大 小 小 于 
整个 网 页 大 小 ， 为 了 填充 网 页 背景 ， 图 片 会 重复 出 现 并 铺 满 整 个 网 页 。 


Ka [全 EN 本 本 HTML+CS5 列 区 布 筷 与 搓 R\ 书 移 亿 - 中 X 


文件 人 演 二 本 看 (MV 收 训 夫 (A) 工具 可 (H) 


14-3 设置 背景 图 片 

在 设 定 背景 图 片 时 , 最 好 同时 也 设 定 背 景色 , 这 样 当 背景 图 片 因 某 种 原因 无 法 正常 显示 时 ， 
可 以 使 用 背景 色 来 代替 。 当 然 ， 如 果 图 片 正常 显示 ， 背 景 图 片 会 覆盖 背景 色 。 

1. 背景 图 片 重复 

在 进行 网 页 设计 时 ， 通 常 都 是 一 个 网 页 使 用 一 张 背景 图 片 ， 如 果 图 片 大 小 小 于 背景 图 片 ， 
会 直接 重复 铺 满 整个 网 页 ， 但 这 种 方式 不 适用 于 大 多 数 页 面 ， 在 CSS 中 可 以 通过 
background-repeat 属性 设置 图 片 的 重复 方式 ， 包 括 水 平 重复 、 垂 直 重 复 和 不 重复 等 。 

background-repeat 属性 用 于 设 定 背景 图 片 是 否 重复 平 铺 。 其 属性 值 说 明 如 表 14-1 所 示 。 


表 14-1 background-repeat 属性 及 其 描述 


[Mt 值 | 押 | 


背景 图 片 水 平和 垂直 方向 都 重复 平 铺 


repeat-x 背景 图 片 水 平方 向 重复 平 铺 


| repeary | 背景 图 片 垂直 方向 重复 平 铺 | 
[no-repeat | 背景 图 片 不 重复 平 铺 | 


background-repeat 属性 重复 背景 图 片 从 元 素 的 左上 角 开 始 平 铺 ， 直 到 水 平 、 垂 直 或 全 部 页 
都 被 背景 图 片 覆 盖 。 
【 例 14.4】〔 实 例文 件 : ch14\14.4.html) 
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<title> 背 景 图 片 重复 </title> 

<style> 

body{ 
background-image:url(xiyang.jpg): 
background-repeat:no-repeat; 


在 正 9.0 中 浏览 效果 如 图 14-4 示 ， 可 以 看 到 网 页 中 显示 背景 图 ,但 图 片 以 默认 大 小 显示 ， 
而 没有 对 整个 网 页 背景 进行 填充 。 这 是 因为 代码 中 设置 了 背景 图 不 重复 平 铺 。 

同样 可 以 在 上 面 代码 中 ， 设 置 background-repeat 的 属性 值 为 其 他 值 ， 例 如 可 以 设置 值 为 
repeat-x， 表 示 图 片 在 水 平方 向 平 铺 。 此 时 ， 在 正 9.0 浏览 器 中 效果 如 图 14-5 所 示 。 


图 14-4 背景 图 不 重复 图 14-5 水 平方 向 重复 平 铺 
2. 背景 图 片 显 示 
对 于 一 个 文本 较 多 、 一 屏 显 示 不 了 的 页 面 ， 如 果 使 用 的 背景 图 片 不 足以 覆盖 整个 页 面 ， 而 


且 只 将 背景 图 片 应 用 在 页 面 的 一 个 位 置 上 , 那么 在 浏览 页 面 时 , 肯定 会 出 现 看 不 到 背景 图 片 的 
情况 ; 再 者 ， 还 可 能 出 现 背 景 图 片 初始 可 见 ， 而 随 着 页 面 的 滚动 又 不 可 见 的 情况 。 也 就 是 说 背 
景 图 片 不 能 时 刻 地 随 着 页 面 的 滚动 而 显示 。 

要 解决 上 述 问 题 ， 用 要 使 用 background-attachment 属性 ， 该 属性 用 来 设 定 背景 图 片 是 
和 否 随 文档 一 起 滚动 。 该 属性 包含 两 个 属性 值 scroll 和 fixed， 并 适用 于 所 有 元 素 ， 如 表 14-2 
所 示 。 
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表 14-2 background-attachment 属性 值 及 描述 


scroll 默认 值 ， 当 页 面 滚动 时 ， 背 景 图 片 随 页 面 一 起 滚动 


fixed 背景 图 片 固定 在 页 面 的 可 见 区 域 里 


使 用 background-attachment 属性 ,可 以 使 背景 图 片 始终 处 于 视野 范围 内 ， 以 避免 出 现 因 页 
面 的 滚动 而 消失 的 情况 。 
【 例 14.5】 实例 文件 :ch14\14.5.html) 


<html> 

<head> 

<title> 背 景 显示 方式 </title> 

<style> 

body{ 
background-image:url(xiyang.jpe); 
background-repeat:no-repeat; 
background-attachment:fixed; 

} 


pt 
text-indent:2em:; 
line-height:30px; 
} 
hl{ 
text-align:center; 
} 
</style> 
<head> 
<body > 
<hl> 兰 享 序 </h1> 
<p> 
永和 九 年 ， 岁 在 奖 (gui) 丑 ， 暮 春之 初 ， 会 于 会 稿 (kuoiji) 山 阴 之 兰亭 ,修神 (xi) 事 也 。 群 贤 毕 至 ， 
少 长 咸 集 。 此 地 有 崇山峻岭 ， 茂 林 修 竹 ， 又 有 清流 激 满 (tuan〉， 映 带 左右 。 引 以 为 流 筋 (shang) 曲 ( qa) 
水 ， 列 坐 其 次 ， 虽 无 丝竹 管弦 之 盛 ， 一 筋 (shang) 一 咏 ， 亦 足以 畅 叙 幽 情 。 
Sp 
<p> 是 日 也 ， 天 朗 气 清 ， 惠 风 和 畅 。 仲 观 宇宙 之 大 ， 俯 察 品 类 之 盛 ， 所 以 游 目 驻 (ché&ng) 怀 ， 足 以 极 视 
昕 之 娱 ， 信 可 乐 也 。</p> 
<p> 夫人 之 相 与 ,俯仰 一 世 。 或 取 诸 怀 抱 ， 晤 言 一 室 之 内 ; 或 因 寄 所 托 ， 放 浪 形 骸 (h6i) 之 外 。 虽 趣 (q 
i) 售 万 殊 ， 静 躁 不 同 ， 当 其 欣 于 所 遇 ， 暂 得 于 己 ， 快 然 自足 ， 不 知 老 之 将 至 。 及 其 所 之 既 倦 ， 情 随 事 迁 ， 感 
慨 系 (xi) 之 矣 。 向 之 所 欣 ， 俯 仰 之 间 ， 已 为 陈 迹 ， 犹 不 能 不 以 之 兴 怀 。 况 修 短 随 化 ， 终 期 于 尽 。 古 人 云 : 
“死生 亦 大 矣 。” 岂 不 痛 哉 ! </p> 
<p> 每 览 董 人 兴 感 之 由 ， 车 合 一 契 ， 未 尝 不 临 文 (jis) 悼 ， 不 能 喻 之 于 怀 。 固 知 一 死生 为 虚 诞 ， 齐 彭 
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殉 (shang) 为 亡 作 。 后 之 视 今 ， 亦 犹 今 之 视 昔 ， 悲 夫 ! 故 列 叙 时 人 ， 录 其 所 述 。 虽 世 殊 事 异 ， 所 以 兴 怀 ， 其 至 
一 也 。 后 之 览 者 ， 亦 将 有 感 于 斯 文 。</p> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 14-6 所 示 , 可 以 看 到 , 当 background-attachment 属性 的 值 为 fixed 
时 ， 背 景 图 片 的 位 置 固定 并 不 是 相对 于 页 面 的， 而 相对 于 页 面 的 可 视 范 围 。 


[SS 晤 吉 HTML+CSS 同 5s 中 - 必 X| 司 革 a= 方 二 


文件 四 ” 丑 问 日 。 查 委 |。 必 坏 闪 (A)。 工具 (7 HI) 


14-6 图片 显 示 方 式 
3. 背景 图 片 的 位 置 


我 们 知道 ， 背 景 图 片 都 是 从 设置 了 background 属性 的 标记 (例如 body 标记 ) 的 左上 角 开 
有 出 现 ， 但 在 实际 网 页 设计 中 ， 可 以 根据 需要 之 间 指 定 背 景 图 片 出 现 的 位 置 。 在 CSS 中 ， 可 
以 通过 background-position 属性 轻松 调整 背景 图 片 位 置 。 
background-position 属性 用 于 指定 背景 图 片 在 页 面 中 所 处 位 置 。 该 属性 值 可 以 分 为 4 类: 
绝对 定义 位 置 (length)、 百 分 比 定义 位 置 (percentage)、 垂 直 对 齐 值 和 水 平 对 齐 值 。 其 中 垂直 
对 齐 值 包括 top、center 和 bottom， 水 平 对 齐 值 包括 left、center 和 right， 如 表 14-3 所 示 。 


表 14-3 background-position 属性 值 及 描述 


属性 什 描述 

length 设置 图 片 与 边 距 水 平和 垂直 方向 的 距离 长 度 ， 后 跟 长 度 单 位 (cm、mm、px 等 ) 
percentage | 以 页 面 元 素 框 的 宽度 或 高 度 的 百分比 放置 图 片 

top 背景 图 片 顶部 居中 显示 

center 背景 图 片 居 中 显示 

bottom | 背景 图 片 底部 居中 显示 

left | 背景 图 片 左 部 居中 显示 

right | 背景 图 片 右 部 居中 显示 
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垂直 对 齐 值 还 可 以 与 水 平 对 齐 值 一 起 使 用 ， 从 而 决定 图 片 的 垂直 位 置 和 水 平 位 置 。 
【 例 14.6】 《实例 文件 :chl4\14.6.html) 


<html> 

<head> 

<title> 背 景 位 置 设 定 </title> 

<style> 

body{ 
background-image:url(xiyang.jpg): 
background-repeat:no-repeat; 
background-position:top right: 

} 

</style> 

<head> 

<body > 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 14-7 所 示 , 可 以 看 到 网 页 中 显示 的 背景 是 从 顶部 和 右边 开始 的 。 


14-7 设置 背景 位 置 


使 用 垂直 对 齐 值 和 水 平 对 齐 值 只 能 格式 化 地 放置 图 片 , 如 果 要 在 页 面 中 自由 地 定义 图 片 的 
位 置 ， 则 需要 使 用 确定 数值 或 百分比 。 此 时 在 上 的 面 代码 中 ， 将 


background-position:top right: 

修改 为 

background-position:20px 30px 

在 正 9.0 中 浏览 效果 如 图 14-8 所 示 ， 可 以 看 到 网 页 中 显示 的 背景 从 左上 角 开 始 ， 但 并 不 


机 
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是 (0，0) 坐标 位 置 ， 而 是 从 (20，30) 坐标 位 置 开始 。 


CO Da cns oox|S ssces= ~ 


| x 大 到 E) 到 二 V| 训 夺 天 (A] 工 呈 (项 动 [H) 


图 14-8 ”指定 背景 位 置 


4. 背景 图 片 大 小 

在 以 前 的 网 页 设计 中 ,背景 图 片 的 大 小 是 不 可 以 控制 的 ， 如 果 想 要 图 片 填充 整个 背景 ， 则 
需要 事先 设计 一 个 较 大 的 背景 图 片 ， 要 么 只 能 让 背景 图 片 以 平 铺 的 方式 来 填充 整个 页 面 。 在 
CSS 中 ， 新 增 了 一 个 background-size 属性 ， 用 来 控制 背景 图 片 大 小 ， 从 而 降低 了 网 页 设计 的 
开发 成 本 。 

background-size 语法 格式 如 下 所 示 : 

background-size : [<length> | <percentage> | auto ]{1,2} | cover | contain 

其 参数 值 含义 如 表 14-4 所 示 。 

表 14-4 background-size 属性 参数 表 


允 数 值 | 实权 


<length> 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 什 

| <percentage> | 取 值 为 0% 到 100%6 之 问 的 值 。 不 可 为 负 值 | 
| cover | 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 正好 完全 禾 盖 所 定义 的 背景 区 域 | 
[contain | 保持 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 宽度 或 高 度 正好 适应 所 定义 的 背景 区 域 | 


【 例 14.7】 “实例 文件 :chl4\14.7html) 


<html> 
<head> 
<title> 背 景 位 置 设 定 </title> 
<style> 
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body{ 
background-image:url(xiyang.jpe): 
background-repeat:no-repeat; 
background-size:cover: 

} 

</style> 

<head> 

<body > 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 14-9 所 示 ， 可 以 看 到 网 页 中 背景 图 片 填充 了 整个 页 面 。 


| 司 ] 包 标 量 HTML+CS5 网 页 市 局 与 站 ”CX | 感 从 叶 位 于 设 十 


文件 由 负 吉 (EF) 至 看 (V) 。 改 硬 闪 (A) 工具 (T) 寿 功 (H) 


14-9 设 定 背景 大 小 


同样 也 可 以 用 像素 或 百分比 指定 背景 的 大 小 。 当 指定 为 百分比 时 , 大 小 会 由 所 在 区 域 的 宽 
度 、 高 度 ， 以 及 background-origin 的 位 置 决定 。 相 应 示例 如 下 。 


background-size:900 800: 


此 时 background-size 属性 可 以 设置 1 个 或 2 个 值 ， 一 个 值 为 必 填 ， 一 个 为 选 填 。 其 中 第 1 
个 值 用 于 指定 图 片 宽度 , 第 2 个 值 用 于 指定 图 片 高 度 ， 如 果 只 设 定 一 个 值 ， 则 第 2 个 值 默认 为 


auto。 


14.1.3 ”背景 复合 属性 


在 CSS 中 ，background 属性 可 以 一 起 使 用 ， 即 综合 了 以 上 所 有 与 背景 有 关 的 属性 《〈 即 以 
back-ground- 开 头 的 属性 ) ， 可 以 一 次 性 地 设 定 背 景 样 式 。 格 式 如 下 : 


background:[background-color] [background-image] [background-repeat] 


。224 。 
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[background-attachment] [background-position] 
[background-size] [background-clip] [background-origin] 


其 中 的 属性 顺序 可 以 自由 调换 ， 并 且 可 以 选择 设 定 。 没 有 设 定 的 属性 ， 系 统 会 自行 为 该 属 
性 添加 默认 值 。 例 如 ， 定 义 背 景 样式 规则 如 下 : 


body 

{ 
background-color:Black: 
background-image:url(bkl.jpg): 
background-position:center: 
background-repeat:repeat-x; 
background-attachment:fixed: 
background-size:900 800: 
background-origin:padding; 
background-clip:content: 


14.2 ”设置 边框 

在 网 页 设计 中 ，HTML 元 素 在 网 页 中 会 占有 一 定 的 区 域 ， 例 如 <a> 标 记 、<p> 标 记 等 ， 对 
于 这 些 标记 可 以 通过 CSS 的 width 和 height 设置 其 大 小 ， 并 通过 border 设置 其 边框 样式 。 
14.2.1 边框 样式 

在 进行 网 页 排版 时 ， 有 时 需要 指定 某 个 区 域 的 元 素 ， 并 将 这 些 元 素 与 其 他 元 素 区 别 开 来 ， 
这 时 可 以 让 HTML 元 素 带 有 边框 ， 并 设置 HTML 边框 样式 。 

Border-style 属性 用 于 设 定 边框 的 样式 ,也 就 是 风格 。 设 定 边框 样式 是 边框 最 重要 的 部 分 ， 
它 主要 用 于 为 页 面 元 素 添加 边框 。 其 语法 格式 如 下 所 示 : 

border-style : none | hidden | dotted | dashed | solid | double | groove | Tidge | inset | outset 

CSS 设 定 了 9 种 边框 样式 ， 如 表 14-5 所 示 。 

表 14-5 边框 样式 属性 及 描述 


属性 值 描述 

none 无 边框 ， 无 论 边框 宽度 设 为 多 大 
dotted 点 线 式 边框 

dashed 破 折线 式 边 框 

solid 直线 式 边框 

double 双 线 式 边框 


groove 槽 线 式 边框 
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( 续 表 ) 


描述 
郊 线 式 边框 

内 嵌 效 果 的 边框 
突起 效果 的 边框 


Ridge 


outset 


【 例 14.8】〔 实 例文 件 ， ch14\14.8.html) 


<html> 
<head> 
<title> 边 框 设 置 </title> 
<style> 
hl { 
border-style:dotted: 
color: black:; 
text-align:center; 
pt 
border-style:double: 
text-indent:2em:; 
} 
</style> 
<head> 
<body> 
<h1> 带 有 边框 的 标题 </h1> 
<p> 带 有 边框 的 段落 </p> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 14-10 示 ， 可 以 看 到 网 页 中 ， 标 题 hl 显示 的 时 候 带 有 边框 ， 其 
边框 样式 为 点 线 式 边框 ， 同 样 段落 也 带 有 边框 ， 其 边框 样式 为 双 线 式 边框 。 


[sje 


a EMH MLcss P - Cx EP 
坦 看 (V) 收藏 闪 (A) ”工具 (T) 帮 动 (H) 


带 有 边框 的 标题 


图 14-10 设置 边框 
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名 在 没有 设 定 边框 颜色 的 情况 下 ，groove、ridge、inset 和 outset 边框 默认 的 颜色 是 
v 灰色 。 dotted、dashed、solid 和 double 这 4 种 边框 的 颜色 基于 页 面 元 素 的 color 值 。 


其 实 , 这 几 种 边框 样式 还 可 以 分 别 定义 在 一 个 边框 中 , 从 上 边框 开始 按照 顺 时 针 的 方向 分 
别 定义 边框 的 上 、 右 、 下 、 左 边框 样式 ， 从 而 形成 多 样式 边框 。 例 如 ， 有 下 面 一 条 样式 规则 : 


p{border-style:dotted solid dashed groove} 
另外 ， 如 果 需 要 单独 定义 边框 的 一 条 边 的 样式 ， 则 可 以 使 用 表 14-6 所 列 的 属性 来 定义 。 
表 14-6 各 边 样式 属性 及 描述 


| 
ET 
调和 


ET 
border-left-style 设 定 左边 框 的 样式 


14.2.2 ”边框 颜色 


在 网 页 设计 中 , 设计 者 不 但 可 以 设置 边框 样式 , 还 可 以 设置 边框 颜色 ， 从 而 增强 边框 的 效 
果 。Border-color 属性 用 于 设 定 边 框 颜色 ， 如 果 不 想 与 页 面 元 素 的 颜色 相同 ， 则 可 以 使 用 该 属 
Border-color 属性 的 语法 格式 如 下 所 示 : 


border-color : color 


Color 表示 指定 颜色 ， 其 颜色 值 通过 十 六 进 制 和 RGB 等 方式 获取 。 

同 边框 样式 属性 一 样 ，border-color 属性 可 以 为 边框 设 定 一 种 颜色 ， 也 可 以 同时 设 定 4 个 
边 的 颜色 。 

【 例 14.9】 《实例 文件 :chl4\14.9.html) 


<html> 
<head> 
<title> 边 框 颜色 设置 </title> 
<style> 
pt{ 
border-style:double: 
border-color:red: 
text-indent:2em:;: 
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<body > 
<p> 边 框 颜色 设置 </p> 
<p style="border-style:solid: border-color:red blue yellow green"> 
分 别 定义 边框 颜色 
</p> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 14-11 所 示 , 可 以 看 到 网 页 中 , 第 一 个 段落 边框 颜色 设置 为 红色 ， 
第 二 个 段落 边框 颜色 分 别 设置 为 红 、 蓝 、 黄 和 绿 。 


全 EN\ 精 是 HTML+CSS 人 ” C X | 感 边 伍 陋 记 设置 
文件 (有 ” 编 强 (E) 。 豆 看 (V) 。 收 蕊 闪 (A) 工具 (Tm 帮 动 (H) 


14-11 设置 边框 颜色 


除了 上 面 设置 4 个 边框 颜色 的 方法 之 外 ， 还 可 以 使 用 如 表 14-7 列 出 的 属性 单独 为 相应 的 
边框 设 定 颜色 。 
表 14-7 ”各 边 颜色 属性 及 描述 
[tt 


议定 上 边 相 外 
ET 


证 下 过 机 
ET 


14.2.3 ”边框 线 宽 


在 CSS 中 ,可 以 通过 设 定 边框 宽度 , 来 增强 边框 效果 。Border-width 属性 就 用 来 设 定 边框 
宽度 ， 其 语法 格式 如 下 所 示 : 


border-width : medium | thin | thick | length 


其 中 预 设 有 3 种 属性 值 : medium、thin 和 thick， 另 外 还 可 以 自行 设置 宽度 (width) ， 如 
表 14-8 所 示 。 
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表 14-8 ”border-width 属性 及 描述 


属性 值 描述 

medium 默认 值 ， 中 等 宽度 
thin | 比 medium 细 
thick | 比 medium 粗 
length | 自 定 义 宽度 


【 例 14.10】 《实例 文件 : ch14\14.10.html) 


<html> 

<head> 

<title> 边 框 宽度 设置 </title> 

<head> 

<body> 
<p style="border-style:dotted: border-width:medium:"> 边 框 颜色 设置 </p> 
<p style="border-style:dashed;border-width:thin:"> 边 框 颜色 设置 </p> 
<p style="border-style:solid; border-width:12px:"> 

分 别 定义 边框 颜色 
</p> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 14-12 示 ， 可 以 看 到 网 页 中 ，3 个 段落 边框 以 不 同 的 粗细 显示 。 


C= | svgahrMLtcssi P - 0 x | GB iter 
文件 月 遇 名 (E) 下 看 收 芋 突 人 D 


工具 (T) ”帮助 (H) 


图 14-12 设置 边框 宽度 


Border-width 属性 其 实 是 border-top-width 、border-right-width 、border-bottom-width 和 
border-left-width 这 4 个 属性 的 综合 属性 ， 这 4 个 属性 分 别 用 于 设 定 上 边框 、 右 边框 、 下 边框 、 
左边 框 的 宽度 。 

【 例 14.11】 《实例 文件 : chl4\14.11.html) 


<html> 
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<head> 

<title> 边 框 宽度 设置 </title> 

<style> 

pl 
border-style:solid: 
border-color-#ff00ee; 
border-top-width:medium; 
border-right-width:thin; 
bottom-width:thick: 
border-left-width:15px:; 

} 

</style> 

<head> 

<body> 

<p > 边框 宽度 设置 </p> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 14-13 所 示 ， 可 以 看 到 网 页 中 ， 段落 的 4 个 边框 以 不 同 的 宽度 显示 。 


本] E\ 精 通 HTML+CSS 万 ”CX | 感 边框 更 座 设 置 
文件 月 。 给 话 (E) 至 看 V】 收藏 亲 (A) 工具 [帮助 (H) 


图 14-13 分 别 设置 4 个 边框 宽度 


14.2.4 ”边框 复合 属性 

border 属性 集合 了 上 述 所 介绍 的 3 种 属性 , 可 以 为 页 面 元 素 设 定 边框 的 宽度 、 样 式 和 颜色 。 
语法 格式 如 下 所 示 : 

border : border-width || border-style || border-color 


其 中 ，3 个 属性 顺序 可 以 自由 调换 。 
【 例 14.12】 《实例 文件 : ch14\14.12.html) 


<html> 
<head> 
<title> 边 框 复合 属性 设置 </title> 
<head> 
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<body > 
<p style="border:dashed red 12px"> 边 框 复合 属性 设置 </p> 
</body> 
</htm> 
在 正 9.0 中 浏览 效果 如 图 14-14 所 示 ， 可 以 看 到 网 页 中 ， 段 落 边 框 样式 以 破 折线 显示 、 颜 
色 为 红色 、 宽 度 为 12 像素 。 


间 EN\ 杖 二 HTML+CSS 有 ”CX | 感 边 性 乓 全 是 性 设置 x Ie 
文件 (站 ”多 强 E) 至 看 (V) 效 荐 夫人】 工具 (T) 可 劲 (H) 


[3 


图 i 玉碎 信 议 症 
14.3 ”综合 实例 一 一 简单 的 公司 主页 


打开 各 种 类 型 的 商业 网 站 ， 最 先 映 入 你 眼帘 的 就 是 首页 ， 也 称 为 主页 。 作 为 一 个 网 站 的 门 
户 ， 一 般 要 求 主页 版 面 整洁 ， 美 观 大 方 。 结 合 前 面 学 习 的 背景 和 边框 知识 ， 我 们 来 创建 一 个 简 
单 的 商业 网 站 。 有 具体 步骤 如 下 所 示 。 


0 和 分 析 需 求 。 


在 本 实例 中 ， 主 页 包括 3 个 部 分 ， 一 部 分 是 网 站 logo， 一 部 分 是 导航 栏 ， 最 后 一 部 分 是 
主页 显示 内 容 。 网 站 logo 此 处 使 用 了 一 个 背景 图 来 代替 ， 导 航 栏 使 用 表格 实现 ， 内 容 列表 使 
用 无 序列 表 实 现 。 实 例 完成 后 ， 效 果 如 图 14-15 所 示 。 


3 构建 基本 HTML。 


为 了 划分 不 同 的 区 域 ，HIML 页 面 需要 包含 不 同 的 div 层 ， 每 一 层 代表 一 个 内 容 。 一 个 
div 包含 背景 图 ， 一 个 div 包含 导航 栏 ， 一 个 div 包含 整体 内 容 ， 内 容 又 可 以 划分 两 个 不 同 的 
层 。 其 代码 如 下 所 示 : 


<html> 

<head> 
<title> 个 人 主页 </title> 
</head> 

<body> 

<center> 

<div> 
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<div class="divl" align=center></div> 

<div class=div2> 

<table width=99%><tr align=center><td> 首 页 </td><td> 最 新 消息 </td><td> 产 品 展示 </td><td> 销 售 网 络 
</td><td> 人 才 招聘 </td><td> 客 户 服务 </td></tr></table> 

</div> 

<div class=div3> 

<div class=div4> 

<ul> 最 新 消息 

<1i> 公 司 举办 2011 金秋 篮球 比赛 </li> 

<l 记 消防 演练 大 比武 </li> 

<! 记 优秀 员工 评比 </li> 

<li> 公 司 发 布 招聘 信息 </li> 

</u> 

</div> 

<div class=div5> 

<ul> 客 户 案例 

<li> 上 海 电力 公司 </li> 

<li> 浙 江 电 力 公司 </li> 

<l> 辽 宁 电 力 公司 </li> 

<li> 河 北 电力 公司 </li> 

</ul> 

</div> 

</div> 

</div> 

</center> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 14-16 所 示 ， 可 以 看 到 在 网 页 中 显示 了 导航 栏 和 两 个 列表 信息 。 


人 才 招 聘 。 寄 户 服务 


| 


14-15 ”商业 网 站 主页 14-16 基本 HTML 结构 
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03 添加 CSS 代码， 设置 背景 Logo。 


<style> 

-div1{ 
height:100px; 
width:820px:; 
background-image:url(main.jpg): 
background-repeatno-repeat: 
background-position:center; 
background-size:cover: 


} 
</style> 
在 正 9.0 中 浏览 效果 如 图 14-17 所 示 , 可 以 看 到 在 网 页 项 部 显示 了 一 个 背景 图 ， 此 背景 覆 
盖 整 个 div 层 ， 并 不 重复 ， 并 且 背 景 图 片 居中 显示 。 
to 级 添加 CSS 代码 ， 设 置 导航 栏 。 
-div2{ 
width:820px: 
background-color:#d2e7ff: 
} 
table{ 
font-size:12px: 
font-family:" 幼 圆 ": 
} 


在 下 9.0 中 浏览 效果 如 图 14-18 所 示 , 可 以 看 到 在 网 页 中 导航 栏 背景 色 为 浅 蓝 色 ,表格 中 
字体 大 小 为 12 像素 ， 字 体 类 型 是 幼 圆 。 


图 14-17 设置 背景 图 图 14-18 设置 导航 栏 
togj 添加 CSS 代码 ， 设 置 内 容 样式 。 


在 正 9.0 中 浏览 效果 如 图 14-19 所 示 ， 两 个 不 同 的 内 容 块 中 间 使 用 虚线 隔 开 。 
06j 添加 CSS 代码 ， 设 置 列表 样式 。 


在 正 9.0 中 浏览 效果 如 图 14-20 所 示 ， 可 以 看 到 在 网 页 中 列表 字号 为 15 像素 ， 字 体 为 楷体 。 


图 14-19 CSS 修饰 边框 图 14-20 美化 列表 信息 
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14.4 专家 和 解 惑 


1. 我 的 背景 图 片 不 显示 ， 是 不 是 路 径 有 问题 ? 
在 一 般 情况 下 ， 设 置 图 片 路 径 的 代码 如 下 。 


background-image:url(logo.jpe): 

background-image-url(../logo.jpg); 

background-image:url(../images/logo.ipe): 

对 于 第 一 种 情况 ， 要 看 此 图 片 是 不 是 与 CSS 文件 在 同一 目录 。 

对 于 第 二 和 第 三 种 情况 ,建议 尽量 不 要 使 用 ,因为 网 页 文件 可 能 存在 于 多 级 目录 中 , 不 同 
级 目录 的 文件 位 置 注定 了 相对 路 径 是 不 一 样 的 。 而 这 样 就 让 问题 复杂 化 了 , 很 可 能 图 片 在 这 个 
文件 中 可 以 显示 正常 ， 换 了 一 级 目录 ， 就 找 不 到 图 片 的 影子 了 。 

有 一 种 方法 可 以 轻松 解决 这 一 问题 ,建立 一 个 公共 文件 目录 ,用 来 存放 一 些 公用 图 片 文件 ， 
例如 “image”， 将 图 片 文件 直接 存 于 该 目录 中 ， 在 CSS 文件 中 ， 可 以 使 用 以 下 方式 。 


ul(images/logo.jpg) 
2. 用 小 图 片 进行 背景 平 铺 好 吗 ? 


不 要 使 用 过 小 的 图 片 做 背景 平 铺 。 这 是 因为 宽度 和 高 度 为 1 像素 的 图 片 平 铺 出 一 个 宽度 和 
高 度 为 200 像素 的 区 域 ， 需 要 复制 200*200=40, 000 次 ， 占 用 资源 。 


3. 边框 样式 border:0 会 占有 资源 吗 ? 


推荐 的 写法 是 bordernone， 虽 然 border:0 只 是 定义 边框 宽度 为 零 , 但 边框 样式 、 颜 色 还 是 
会 被 浏览 器 解析 ， 占 用 资源 。 


第 15 章 
< 用 CSS 美 化 超级 链接 和 蚀 标 > 


超 链接 是 网 页 的 灵魂 ,各 个 网 页 都 是 通过 超 链接 链接 在 一 起 的 , 超 链 接 完 成 了 页 面 的 跳 转 。 
通过 CSS 属性 定义 ， 可 以 设置 出 具有 不 同 外 观 和 样式 的 超 链接 ， 从 而 增加 网 页 样式 特效 。 


15.1 超级 链接 特效 


超级 链接 由 <a></a> 标 记 组 成 ， 可 以 是 文字 或 图 片 。 添 加 了 超级 链接 的 文字 具有 自己 的 样 
式 ， 从 而 和 其 他 文字 区 别 ， 其 中 默认 超级 链接 的 样式 为 蓝 色 文 字 ， 有 下 划 线 。 而 通过 CSS 属 
性 ， 可 以 修饰 超级 链接 ， 从 而 达到 美观 的 效果 。 


15.1.1 改变 超级 链接 的 基本 样式 


使 用 HTML 标记 <a> 创 建 的 超级 链接 非常 普通 ， 除 颜色 发 生变 化 和 带 有 下 划 线 之 外 ,其 他 
的 和 普通 文本 区 别 不 大 , 这 种 传统 的 超级 链接 样式 显 法 满足 广大 用 户 的 需求 。 此 时 可 以 通 
过 CSS 来 增强 样式 效果 。 

对 于 超级 链接 的 修饰 ， 通 常 可 以 采用 CSS 伪 类 ， 前 面 已 经 介绍 过 这 个 概念 。 伪 类 是 一 种 
特殊 的 选择 符 , 能 被 浏览 器 自动 识别 。 其 最 大 的 用 处 是 在 不 同 状态 下 可 以 对 超级 链接 定义 不 同 
的 样式 效果 ， 伪 类 是 CSS 本 身 定义 的 一 种 类 。 

超级 链接 伪 类 的 详细 信息 如 表 15-1 所 示 。 


表 15-1 超级 链接 伪 类 


伪 类 用 途 
a:link 定义 a 对 象 在 未 被 访问 前 的 样式 
a:hover | 定义 a 对 象 在 其 鼠标 悬 停 时 的 样式 
aiactive | 定义 a 对 象 被 用 户 激活 时 的 样式 〈 在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 
axvisited | 定义 a 对 象 在 其 链接 地 址 已 被 访问 过 时 样式 
CSS 就 是 通过 上 面 定义 的 4 个 超级 链接 伪 类 ， 设 置 超级 链接 样式 。 也 就 是 说 ， 如 果 要 定 


义 未 被 访问 的 超级 链接 的 样式 ， 可 以 通过 a:link 来 实现 ， 如 果 要 设置 被 访问 过 的 超级 链接 的 样 
式 , 可 以 定义 avisited 来 实现 。 若 要 定义 鼠标 悬浮 和 被 激活 时 的 样式 , 就 使 用 ahover 和 a:active 
来 实现 。 
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【 例 15.1】 《实例 文件 : ch15\15.1.html) 


<html> 
<head> 
<title> 超 级 链接 样式 </title> 
<style> 
af 
Color:#545454: 
text-decoration:none; 
} 
alink{ 
color:#S45454: 
text-decoration:none; 
} 
a:hover{ 
color:#f60: 
text-decoration:underline; 
b 
aactive{ 
Color:#FF6633; 
text-decoration:none; 
} 
</style> 
</head> 
<body> 
<center> 
<a href=#> 首 页 </a>|<a ”hre 伍 术 水 月 论坛 </a> 
<center> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 15-1 所 示 ， 可 以 看 到 两 个 超级 链接 ， 当 鼠标 停留 在 第 一 个 超级 
链接 上 方 时 ， 文 字 显示 颜色 为 黄色 ， 并 带 有 下 划 线 。 另 一 个 超级 链接 没有 被 访问 ， 不 带 有 下 划 
线 ， 颜 色 显 示 为 灰色 。 

由 此 可 知 ， 伪 类 只 提供 了 一 种 途径 ,用 来 修饰 超级 链接 ， 而 对 超级 链接 真正 起 作用 的 是 我 
们 前 面 学 习 的 文本 、 背 景 和 边框 等 属性 。 

在 网 页 显示 的 时 候 , 有 时 一 个 超级 链接 并 不 能 说 明 其 链接 背后 的 含义 , 通常 还 要 为 这 个 链 
接 加 上 一 些 介绍 性 信息 ， 即 提示 信息 。 此 时 可 以 通过 超级 链接 a 提供 描述 标记 tile， 来 达到 这 
个 效果 。Title 属性 的 值 即 为 提示 内 容 ， 当 浏览 器 的 光标 停留 在 超级 链接 上 时 ， 会 出 现 提示 内 
容 ， 并 且 不 会 影响 页 面 的 整洁 。 
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【 例 15.2】 实例 文件 : ch15\15.2.html) 


<html> 
<head> 
<title> 超 级 链接 样式 </title> 
<style> 
af 
color:#005799; 
text-decoration:none; 
} 
alink{ 
color:#S45454: 
text-decoration:none; 
} 
a:hover{ 
color:#f60: 
text-decoration:underline: 
} 
aactive{ 
Color:#FF6633; 
text-decoration:none; 
} 
</style> 
</head> 
<body> 
<a href="" title=" 这 是 一 个 优秀 的 团队 "> 了 解 我 们 </a> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 15-2 所 示 ， 可 以 看 到 当 鼠 标 停留 超级 链接 上 方 时 ， 文 字 显示 颜 
色 为 黄色 ， 带 有 下 划 线 ， 并 且 显 示 提 示 信 息 “ 这 是 一 个 优秀 的 团队 ”。 


司 HiUsers hdmnist P - OX 
文件 站 痊 强 (E) 得 看 (V。 衣 莹 夫 (A) 工具 人 都 名 (H) 


间 Htucerewdminict D - OX | a 
文件 由 编 强 (E) 可 看 (Vi 必 蕊 夫 (A) 工具 (D) 者 起 (H} 


| 襄 嘱 月 论坛 


了 了 全 全 人 


|[ 莹 是 一 个 沈 秀 的 加 队 


Fe//HUsers/Administrato/ Documents/151. htm Fle///H/Users/Administrator/Documents/ 


图 15-1 使 用 伪 类 修饰 超级 链接 图 15-2 超级 链接 提示 信息 
15.1.2 ”超级 链接 背景 图 设置 


一 个 普通 的 超级 链接 ， 要 么 是 以 文本 显示 ， 要 么 是 以 图 片 显示 ， 显 示 方 式 很 单一 。 可 以 将 
图 片 作为 背景 图 添加 到 超级 链接 里 ,这样 链接 呈现 更 加 精美 的 效果 。 超级 链接 如 果 要 添加 背景 
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图 片 ， 通 常 使 用 background-image 属性 来 完成 。 


【 例 15.3】 实 例文 件 : ch15\15.3.html) 


<html> 

<head> 

<title> 超 级 链接 样式 </title> 

<style> 

af 
background-image:url(17.jpe): 
width:90px:; 
height:30px: 
color:#005799: 
text-decoration:none; 

} 

ahover{ 
background-image:url(115.jpe): 
color:#006600: 
text-decoration:underline: 

} 

</style> 

</head> 

<body> 

<a href="#"> 炼 器 </a> 

<a href="#"> 炼 丹 </a> 

<a href="#"> 炼 符 </a> 

</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 15-3 所 示 ， 可 以 看 到 页 面 中 显示 了 3 个 超级 链接 ， 当 鼠标 停留 
在 一 个 超级 链接 上 时 , 其 背景 图 就 会 显示 蓝 色 并 且 文字 带 有 下 划 线 , 而 当 鼠 标 不 在 超级 链接 上 
时 ， 背 景 图 显示 浅 蓝 色 ， 并 且 文字 不 带 有 下 划 线 。 


文件 (月 六 关 (E) 。 童 看 (V) ”收藏 夫 (A) 


工具 (TD) 帮助 (H) 


Leb 


file:///H:/Users/Administrator/Documents/ch15/15.3.html# 


图 15-3 图片 超级 链接 
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在 上 面 的 代码 中 ， 使 用 background-image 属性 引入 背景 图 ， 使 用 text-decoration 属性 设置 
超级 链接 是 否 具有 下 划 线 。 


15.1.3 ”超级 链接 按钮 效果 


有 时 为 了 增强 超级 链接 的 效果 , 会 将 超级 链接 模拟 成 表单 按钮 , 即 当 鼠 标 指针 移动 到 一 个 
超级 链接 上 的 时 候 ,， 超级 链接 的 文本 或 图 片 就 会 像 被 按 下 一 样 ， 有 一 种 四 陷 的 效果 。 其 实现 方 
式 通常 是 利用 CSS 中 的 a:hover 属性 , 当 鼠 标 经 过 链接 时 , 会 将 链接 向 下 、 向 右 各 移 一 个 像素 ， 
这 时 候 显 示 效 果 就 好 像 按 钮 被 按 下 。 

【 例 15.4】 实 例文 件 : ch15\15.4.html) 


<html> 

<head> 

<title> 超 级 链接 样式 </title> 

<style> 

af 
font-family:" 幼 圆 ": 
font-size:2em:; 
text-align:center; 
margin:3px; 

} 

a:link,a:visited{ 
color:#ac2300: 
padding:4px 10px 4px 10px: 
background-color:#ccd8db: 
text-decoration:none; 
border-top: 1px solid #EEEEEE: 
border-left: 1px solid #EEEEEE: 
border-bottom:1px solid #717171: 
border-right: 1px solid #717171:; 


} 

a:hover{ 
color:#821818: 
padding:Spx 8px 3px 12px: 
background-color:#e2c4c9: 
border-top:1px solid #717171: 


border-left:1px solid #717171: 
border-bottom: 1px solid #EEEEEE: 
border-right: 1px solid #EEEEEE: 

} 

</style> 

</head> 
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<body> 

<a href="#"> 首 页 </a> 

<a href="#"> 水 月 日 记 </a> 
<a href="#"> 水 月 学 习 </a> 
<a href="#"> 闲 言 碎 语 </a> 
<a href="#"> 生 活 趣事 </a> 
</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 15-4 所 示 ， 可 以 看 到 页 面 中 显示 了 5 个 超级 链接 ， 当 鼠标 停留 


在 一 个 超级 链接 上 时 ,其 背景 色 显示 黄色 并 具有 中 陷 的 感觉 , 而 当 鼠 标 不 在 超级 链接 上 时 ， 背 
景 显示 浅 灰 色 。 


~、 
ES HNUserswdministratonDocumentswh 及 ~ 0 X 全 二 x 
文件 站 注 ( 理 看 MV) 必 芋 (A) 工具。 阴 隐 (H) 


首页 | 水 月 日 记 | 水 月 学 习 | 朵 言 碎 语 ”生活 趣事 | 


files///Hi/Users/Administrator/Documents/ch15/15.4 hemls 


图 15-4 ”超级 按钮 效果 


上 面 的 CSS 代码 中 , 需要 对 <a> 标 记 进 行 整体 控制 , 同时 加 入 了 CSS 的 2 个 伪 类 属性 。 
对 于 普通 超 链接 和 单 击 过 的 超 链接 采用 同样 的 样式 ， 并 且 边 框 的 样式 模拟 按钮 效果 。 而 对 
于 鼠标 指针 经 过 时 的 超级 链接 ， 相 应 地 改变 文本 颜色 、 背 景色 、 位 置 和 边框 ， 从 而 模拟 按 
下 的 效果 。 


15.2 鼠标 特效 


对 于 经 常 操作 计算 机 的 人 来 说 ， 当 鼠标 移动 到 不 同 地 方 ， 或 执行 不 同 操作 时 ， 鼠 标 样 
式 是 不 同 的 。 例 如 ， 当 需要 伸缩 窗口 时 ， 将 鼠标 放置 在 窗口 边沿 处 ， 鼠 标 会 变 成 双向 箭头 
状 ; 当 系 统 繁忙 时 ， 鼠 标 会 变 成 漏斗 状 。 如 果 要 在 网 页 中 实现 这 种 效果 ， 可 以 通过 CSS 属 
性 定义 实现 。 


15.2.1 使 用 CSS 控制 鼠标 箭头 

CSS 不 仅 能 够 准确 地 控制 及 美化 页 面 ， 而 且 还 能 定义 鼠标 指针 样式 。 当 鼠标 移动 到 不 同 
的 HTML 元 素 对 象 上 面 时 ， 鼠 标 会 以 不 同形 状 或 图 像 显示 。CSS 通过 改变 cursor 属性 (鼠标 
指针 属性 ) 来 实现 对 鼠标 样式 的 控制 。 


Cursor 属性 包含 17 个 属性 值 ， 对 应 鼠标 的 17 个 样式 ， 而 且 还 能 够 通过 url 链接 地 址 自 定 
义 鼠 标 指针 ， 如 表 15-2 所 示 。 
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表 15-2 鼠标 样式 
属性 值 说 明 
auto 自动 ， 按 照 默认 状态 自行 改变 
crosshair 精确 定位 十 字 
default 默认 鼠标 指针 
hand 手 形 
move 移动 
help 帮助 
wait 等 待 
text 文本 
nr-resize 箭头 朝 上 双向 
s-resize 箭头 朝 下 双向 
w-resize 箭头 朝 左 双向 
e-resize 箭头 朝 右 双向 
ne-resize 箭头 右上 双向 
se-resize 箭头 右 下 双向 
nw-resize 箭头 左上 双向 
SW-Iesize 箭头 左下 双向 
pointer 指示 
url (ur) 自 定义 鼠标 指针 


【 例 15.5】 《实例 文件 : ch15\15.5.html) 


<html> 
<head> 
<title> 鼠 标 特效 </title> 
</head> 
<body> 
<h2>CSS 控制 鼠标 箭头 </h2> 
<div style="font-size:10pt:color:DarkBlue"> 
<p style="cursor:hand"> 手 形 </p> 
<p style="cursor:move"> 移 动 </p> 
<p style="cursor:help"> 帮 助 </p> 
<p style="cursor:n-resize"> 箭 头 朝 上 双向 </p> 
<p style="cursor:ne-resize"> 箭 头 右 上 双向 </p> 
<p style="cursor:wait"> 等 待 </p> 
</div> 
</body> 
</html> 
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在 正 9.0 中 浏览 效果 如 图 15-5 所 示 ， 可 以 看 到 多 个 鼠标 样式 提示 信息 ， 当 鼠标 放 到 “ 帮 
助 ” 文 字 上 时 ， 鼠 标 会 以 问号 “? ”显示 ， 从 而 起 到 提示 作用 。 读 者 可 以 将 鼠标 放 在 不 同 的 文 


字 上 ， 查 看 不 同 的 鼠标 样式 。 


ee 


2 ~ re 


SE 


Eo 


CSS 控 制 鼠 标 第 头 
手 形 

移动 

帮助 

田 头 斌 上 双向 

第 拓 右 上 双向 

等 千 候 


图 15-5 鼠标 样式 


需要 重点 说 明 的 是 自 定义 鼠标 样式 ， 为 使 页 面 更 加 美观 ， 


\ 式 的 鼠标 指针 来 代替 传统 鼠标 指针 。 


| 


15.2.2 ”鼠标 变幻 超 链接 


知道 了 如 何 控制 鼠标 样式 , 就 可 以 轻松 制作 出 鼠标 指针 样式 变幻 的 超级 链接 效果 , 即将 鼠 
标 放 到 超级 链接 上 , 可 以 看 到 超级 链接 颜色 、 背景 图 片 发 生变 化 , 并 且 鼠 标 样式 也 会 发 生变 化 。 


【 例 15.6】 (实例 文件 : ch1S\15.6.html) 


<html> 

<head> 

<title> 鼠 标 手势 </title> 

<style> 

af 
display:block: 
background-image:url(03.jpg): 
background-repeat:no-repeat: 
width:100px: 
height:30px: 
line-height:30px: 
text-align:center: 
Color:#FFFFFF: 
text-decoration:none: 

} 

a:hover{ 
background-image:url(115.jpg): 
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color:#FF0000: 
text-decoration:none; 
} 
help{ 
cursorhelp: 
} 
.text{cursor:text:} 
</style> 
</head> 
<body> 
<a href="#" class="help"> 帮 助 我 们 </a> 
<a href="#" class="text"> 招 聘 信息 </a> 
</body> 
</html> 
在 下 9.0 中 浏览 效果 如 图 15-6 所 示 ， 可 以 看 到 当 鼠 标 放 到 “帮助 我 们 ”上 时 ， 其 鼠标 样 
式 以 问号 显示 ， 字 体 颜 色 显示 为 红色 ， 背 景色 为 蓝天 白云 。 当 鼠标 不 在 “帮助 我 们 ”上 时 ， 背 
景 图 片 为 绿色 ， 字 体 颜色 为 白色 。 


(ee) 各] HAUsersAdminist DP - © X | 大 RF 


文件 (站 ”久久 (E) 。 豆 看 (V)。 收 硬 交 (A) 工具 (T) 攻 却 (H) 


[Filey/H/Users/Administrator/Documents/ch15/15.6.htmlz 


图 15-6 和 鼠标 变幻 效果 
15.2.3 ”页 面 滚动 条 
当 一 个 网 页 内 容 较 多 的 时 候 , 浏览 器 窗口 不 能 在 一 屏 内 完全 显示 ,就 会 给 浏览 者 提供 滚动 
条 ， 方 便 读者 浏览 相关 内 容 。 对 于 正 浏览 器 ， 可 以 单独 设置 滚动 条 样式 ， 从 而 满足 网 站 整体 
样式 设计 。 
滚动 条 主要 由 3dlight、highlight、face、arrow、shadow 和 darkshadow 几 个 部 分 组 成 。 其 
具体 含义 如 表 15-3 所 示 。 
表 15-3 ”滚动 条 属性 设置 


滚动 条 属性 CSS 版 本 兼容 性 | 描述 
scrollbar-highlight-color 正 专 有 属性 | IE5.5+ 设置 或 检索 滚动 条 3D 界面 的 亮 边 (ThreedHighlight) 
颜色 
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滚动 条 属性 


( 续 表 ) 
描述 


scrollbar-3d-light-color 


设置 或 检索 滚动 条 亮 边 框 颜色 


scrollbar-face-color 


设置 或 检索 滚动 条 3D 表面 (ThreedFace) 的 颜色 


scrollbar-arrow-color 正 专 有 属性 IE5.5+ 设置 或 检索 滚动 条 方向 箭头 的 颜色 

scrollbar-shadow-color 正 专 有 属性 | IE5.5+ 设置 或 检索 滚动 条 3D 界面 的 上 暗 边 (ThreedShadow) 
颜色 

scrollbar-dark-shadow-color | 正 专 有 属性 ”| IE5.5+ 设置 或 检索 滚动 条 上 暗 边框 (ThreedDarkShadow) 颜色 

scrollbar-base-color 正 专 有 属性 IE5.5+ 设置 或 检索 滚动 条 基准 颜色 。 其 他 界面 颜色 将 据 此 自 


动 调整 


【 例 13.7】 《实例 文件 :ch1S\15.7.html) 


<html> 
<head> 


<title> 设 置 滚动 条 </title> 


<style> 

body{ 
OverFlow-x:hidden; 
overFlow-y:scroll; 


scrollBar-face-color:green; 
scrollBar-hightlight-color:red:; 
scrollBar-3dlight-color:orange; 
scrollBar-darkshadow-color:blue; 
scrollBar-shadow-color:yellow:; 


scrollBar-arrow-color:purple: 


scrollBar-track-color:black: 


scrollBar-base-color:pink; 


} 
pt 
text-indent:2em; 
} 
</style> 
</head> 
<body> 


<hl align=center> 岳 阳 楼 记 </h1> 


<p> 


庆历 四 年 春 ， 腾 子 京 请 守 巴 陵 郡 。 越 明年 ， 政 通 人 和 ， 百 废 具 兴 。 乃 重修 岳阳 楼 ， 增 其 旧制 ， 刻 唐 贤 今 
人 诗 赋 于 其 上 。 属 (zhi) 予 作文 以 记 之 。 


</p> 
<p> 
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予 观 夫 巴 陵 胜 状 ， 在 洞庭 一 湖 。 衔 远 山 ， 吞 长江， 浩 浩 汤 汤 (shangshang) ， 横 无 际 涯 。 朝 晖 夕 阴 ， 气 
象 万 千 。 此 则 岳阳 楼 之 大 观 也 ， 前 人 之 述 备 括 。 然 则 北 通 巫 峡 ， 南 极 潇湘 ， 迁 客 骚人 ， 多 会 于 此 ， 览 物 之 情 ， 
得 无 异乎 ? 

<p<D> 

若 夫 替 雨 徘 徘 ， 连 月 不 开 ， 阴 风 弩 号 ， 浊 浪 排 空 。 日 星 隐 曜 ， 山 岳 潜 形 。 商 旅 不 行 ， 档 倾 务 挫 。 沙 暮 冥 
冥 ， 虎 腿 猿 啼 。 登 斯 楼 也 ， 则 有 去 国 怀 乡 ， 忧 诡 睛 训 ， 满 目 萧然 ， 感 极 而 翡 者 矣 。 

/p><p> 

至 若 春 和 景明 ， 波 澜 不 惊 ， 上 下 天 光 ， 一 脾 万 需 。 沙 鸭 翔 集 ， 锦 铸 游 泳 。 岸 芷 汀 (tIng) 兰 ， 郁 郁 青青 。 
而 或 长 烟 一 空 ， 持 月 千里 ， 浮 光 跃 金 ， 静 影 沉 壁 ， 渔 歌 互 答 ， 此 乐 何 极 ! 登 斯 楼 也 ， 则 有 心旷神怡 ， 宠 辱 借 
忘 ， 把 酒 临风 ， 其 喜洋洋 者 锋 。 </p><p> 

啼 夫 ! 予 尝 求 古 仁 人 之 心 ， 或 异 二 者 之 为 。 何 哉 ? 不 以 物 喜 ， 不 以 已 悲 ， 居 庙堂 之 高 ， 则 忧 其 民 ， 处 江 
湖 之 远 ， 则 忧 其 君 。 是 进 亦 忧 ， 退 亦 忧 。 然 则 何 时 而 乐 耶 ? 其 必 轧 “先天 下 之 忧 而 忧 ， 后 天 下 之 乐 而 乐 ” 乎 ? 
嘲 ! 微 斯 人 ， 吾 谁 与 归 ? 

p><p> 

时 六 年 九 月 十 五 日 。 


在 正 9.0 中 浏览 效果 如 图 15-7 所 示 ， 可 以 看 到 页 面 显示 了 一 个 绿色 滚动 条 ， 滚 动 条 边框 
显示 黄色 ， 箭 头 显示 为 紫色 。 


加 Hbeersw: 
EEC 


四 年 喜 ， 胖 子 京 痪 守 巴 陵 那 。 越 明年 ， 人 和 ， 百 刻 具 汇 。 乃 重修 
se 其 | E 制 ， 刘 唐 医 今 人 圭 册 于 其 上 、 属 《zhi) 予 作文 以 记 之 。 


,a Ne 人 


若 夫 汰 雨 徘 徘 ， 连 月 不 开 ， 阴 风 怎 号 ， 旭 沪 ] 日 星 隐 哄 ， 山 岳 洪 形 。 
铭 个人 的 席 踢 猿 哼 。 间 所 楼 也 ， 则 有 去 国 剑 乡 ， 优 主 


至 若 春 和 号 明 ， 狂 确 上 下 天 光 ， 一 碧 万 需 。 秒 区 兰 集 ， 锦 铅 游 泳 
re) 兰 ， 邦 部 青青 。 而 或 长 烟 一 宝 ， 振 月 千里 ， 泽 光 跃 金 
玩乐 请 本 斯 楼 也 ， 则 有 心 扩 福 怡 ， 完 等 信 坊 ， 人 


图 15-7 使 用 CSS 设置 滚动 条 
15.3 ”综合 实例 1 一 一 制作 实用 导航 栏 


网 站 每 个 页 面 中 ,基本 都 有 一 个 导航 栏 ， 作 为 浏览 者 跳 转 的 入 口 。 导 航 栏 一 般 由 超级 链接 
创建 ， 导 航 栏 的 样式 可 以 采用 CSS 来 设置 。 导 航 栏 样式 变化 基于 文字 、 背 景 图 片 和 边框 的 变 
化 。 

结合 前 面 学 习 的 知识 ， 创 建 一 个 实用 工具 栏 。 具 体 步 骤 如 下 所 示 。 
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0 和 分 析 需 求 。 


通常 需要 在 导航 栏 上 创建 一 些 超 级 链接 , 然后 对 这 些 超 级 链接 进行 修饰 。 超 级 链接 可 以 横 
排 ， 也 可 以 紧 排 。 链 接 上 可 以 导入 背景 图 片 ， 文 字 上 也 可 以 添加 下 划 线 。 实 例 完成 后 ， 其 效果 
如 图 15-8 所 示 。 


to3 构建 HTML， 创 建 超级 链接 。 


<html > 

<head> 
<title> 制 作 导 航 栏 </title> 
</head> 

<body> 

<a href="#"> 最 新 消息 </a> 
<a href="#"> 产 品 展示 </a> 
<a href="#"> 客 户 中 心 </a> 
<a href="#"> 联 系 我 们 </a> 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 15-9 所 示 ， 可 以 看 到 页 面 中 创建 了 4 个 超级 链接 ， 其 排列 方式 
为 横 排 ， 颜 色 为 蓝 色 ， 文 字 带 有 下 划 线 。 


DO sexJewrrns | 


文件 (月 ” 妖 强 (E) 下 看 (V) 收藏 交 (A) 工具 站 疾 曙 (H) 


Fe- 区 


ES 和 HAUsersAdminist PD- GX [SIae | 


文件 (月 ” 妨 强 (E) 。 豆 看 (V) ”站 草 突 (A) 工具 (T) 帮助 (H) 


| 最 新 浪 息 产品 展示 容 户 中 心 联系 我 们 


图 15-8 ”导航 栏 效果 图 15-9 创建 超级 链接 
3 添加 CSS 代码 ， 修 饰 超级 链接 的 样式 。 


<style type="text/css"> 

<I-- 

a, a:Visited { 
display: block: 
font-size:16px: 
height 50px: 


“247。 


精 丈 HTMYL+CSS 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


width: 80px: 
text-align: center: 
line-height: 40px: 
color: #000000: 
background-image: Url(20.jpg): 
background-repeat: no-repeat; 
text-decoration: none; 

上 


-> 
</style> 


在 下 9.0 中 浏览 效果 如 图 15-10 所 示 ， 可 以 看 到 页 面 中 4 个 超级 链接 排列 方式 变 为 竖 排 ， 
并 且 每 个 链接 都 导入 了 一 个 背景 图 片 ， 超 级 链接 高 度 为 50 像素 ,宽度 为 80 像素 , 字体 颜色 为 
黑色 ， 文 字 不 带 有 下 划 线 。 


ti 级 添加 CSS 代码 ， 修 饰 链接 肪 浮 样式 。 


a:hover { 
font-weight: bolder; 
color: #FFFFFF:; 
text-decoration: underline: 
background-image: url(hover.gif): 
} 


在 下 9.0 中 浏览 效果 如 图 15-11 所 示 , 可 以 看 到 当 鼠 标 放 到 导航 栏 上 的 一 个 超级 链接 上 时 ， 
其 背景 图 片 发 生 了 变化 ， 文 字 带 有 下 划 线 。 


站 HAUsersAdminist P - Cx] EIae | 司 HAUsersAdminist D - © X TRE | 
文件 媚 强 (E) 重 看 (V) 收 古 交 (A】 工具 大 动 H 文件 月。 六 对 (6。 下 看 (V)。 收 请 交 (A) 工具 (T) 赤 动 (H) 
| 
二 
放量 
而 
| 
| -| | 
图 15-10 设置 链接 基本 样式 图 15-11 设置 鼠标 悬浮 样式 


15.4 综合 实例 2 一 一 鼠标 特效 


在 浏览 网 页 时 ， 我 们 看 到 鼠标 指针 的 形状 有 箭头 、 手 形 和 工 字形 ， 但 在 Windows 环境 下 
可 以 看 到 的 鼠标 指针 样式 要 比 这 个 多 得 多 。CSS 弥补 了 HTML 语言 在 这 方面 的 不 足 ， 可 以 通 
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过 cursor 属性 设置 各 种 样式 的 鼠标 , 并 且 可 以 自 定 义 鼠 标 。 本 实例 将 创建 鼠标 特效 并 自 定义 一 
个 鼠标 。 


本 实例 结合 前 面 介 绍 的 内 容 ， 将 创建 一 个 鼠标 特效 实例 。 其 具体 步骤 如 下 所 示 。 
0 和 分 析 需 求 。 
所 谓 鼠 标 特效 ， 是 指导 背景 图 片 、 文 字 和 鼠标 指针 发 生变 化 ， 从 而 吸引 人 注意 。 本 实例 将 


创建 3 个 超级 链接 , 并 设 定 它们 的 样式 。 实例 完成 后 , 在 正 9.0 浏览 器 中 的 显示 效果 如 图 15-12 
和 图 15-13 所 示 。 


Ee 
HAUsersAdminist D - O X [Sm | 


文件 月 ” 遇 名 (日 吾 委 (WV) 收 草 突 (A) 工具 (T) 项 购 (H) 


[cmE3 
Enweeornnp-cxjeasn | 


文 作 中。 痊 雪 (6 豆 看 (V) 。 收 齐 夫 /A) 工具 (帮助 (H) 


产品 帮助 下 载 产品 一 贸 


产品 帮助 /Oy 自 定义 限 标 


| [fiey/H/Users/Administrator/Documents/ch15/15.9.htmlz ) ~ 


file///H:/Users/Administrator/Documents/ch15/15.9.htmlz | -i 


图 15-12 鼠标 特效 1 图 15-13 鼠标 特效 2 
to3 创建 HTML， 实 现 基 本 超级 链接 。 


<html> 

<head> 

<title> 鼠 标 特效 </title> 
</head> 

<body> 

<center> 

<a href="#" > 产品 帮助 </a> 
<a hre 伍 "#" > 下 载 产品 </a> 
<a href="#"> 自 定义 鼠标 </a> 
</center> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 15-14 所 示 , 可 以 在 页 面 中 看 到 3 个 超级 链接 , 文字 颜色 为 蓝 色 ， 


并 且 带 有 下 划 线 。 


to 添加 CSS 代码， 修饰 整体 样式 。 


精 殉 HTML+C55 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


body{ 
font-family:" 宋 体 "; 
font-size:12px:; 

} 


a 


</style> 


在 正 9.0 中 浏览 效果 如 图 15-15 所 示 ， 可 以 看 到 超级 链接 颜色 不 变 ， 字 号 为 12 像素 ， 字 
体 为 宋体 。 


Fe 


uy = = 
(DO eonnn p+ ox] Easmx | 


文件 中 痴 怠 [E) 。 豆 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


人 


图 15-14 创建 超级 链接 图 15-15 设置 全 局 样式 
t@ 约 添加 CSS 代码 ， 修 饰 链接 基本 样式 。 


a, a:Visited { 
line-height:20px: 
color: #000000; 
background-image:url(nav02.jpe): 
background-repeat: no-repeat: 
text-decoration: none: 


} 


在 焉 9.0 中 浏览 效果 如 图 15-16 所 示 , 可 以 看 到 超级 链接 引入 了 背景 图 片 ， 文字 不 带 有 下 
划 线 ， 并 且 颜 色 为 黑色 。 


加 添加 CSS 代码， 修饰 悬浮 样式 。 


ahover { 
font-weight bold: 
color: #FFFFFF: 
} 


在 正 9.0 中 浏览 效果 如 图 15-17 所 示 , 可 以 看 到 当 和 鼠标 放 到 超级 链接 上 时 ,字体 颜色 变 为 
白色 ， 字 体 加 粗 。 


06) 添加 CSS 代码 ， 设 置 鼠标 指针 。 


<a hre 人 ="#" style="cursor:help:"> 产 品 帮助 </a> 
<a href="#" style="cursor:wait:"> 下 载 产 品 </a> 


S20 
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<a href="#" style="CURSOR: url(0041.ani)"> 自 定义 鼠标 </a> 


|= 


ene -ox |G mame | 


| TT TT TT 
图 15-16 设置 链接 基本 样式 15-17 设置 悬浮 样式 
在 下 9.0 中 浏览 效果 如 图 15-18 所 示 , 可 以 看 到 当 鼠 标 放 到 超级 链接 上 时 ， 鼠标 指针 变 为 问号 。 


[=-Een 


eo rr 
文件 (F) ”六 强 (E) 至 看 (V) ” 收 基 闪 (A) ”工具 (T) 帮助 (H) 
下 载 产品 自 定义 鼠标 
es 


files///H:/Users/Administrator/Documents/ch15/15.9.ht... 


15-18 设置 鼠标 指针 
15.5 ”专家 解 惑 


1. 丢失 标记 中 的 结尾 斜 线 ， 会 造成 什么 后 果 ? 


页 面 排版 失效 。 结尾 斜 线 也 是 造成 页 面 失 效 比 较 常 见 的 原因 。 我 们 很 容易 忽略 结尾 斜 线 之 
类 的 东西 ， 特 别 是 在 image 标签 等 元 素 中 。 在 严格 的 DOCTYPE 中 这 是 无 效 的 。 要 在 img 标 
签 结尾 处 加 上 “/” 以 解决 此 问题 。 


2. 设置 了 超级 链接 激活 状态 ， 怎 么 看 不 到 结果 ? 


当前 激活 状态 “a:active” 一 般 被 显示 的 情况 非常 少 ， 因 此 很 少 使 用 。 因 为 当 用 户 单 击 一 
个 超级 链接 之 后 ， 焦 点 很 容易 从 这 个 链接 上 转移 到 其 他 地 方 。 例 如 ， 新 打开 的 窗口 等 ， 此 时 该 
超级 链接 就 不 再 是 “当前 激活 ”状态 了 。 

3. 为 什么 相同 的 鼠标 效果 在 不 同 浏览 器 中 不 一 样 ? 

很 多 时 候 , 浏览 器 调用 的 鼠标 是 操作 系统 的 鼠标 效果 , 因此 同一 用 户 浏览 器 之 间 的 差别 很 
小 ,但 不 同 操作 系统 的 用 户 之 间 还 是 存在 差异 的 。 例 如 有 些 鼠 标 效果 可 以 在 正 浏览 器 中 显示 ， 
但 不 能 在 Firefox 浏览 器 中 显示 。 
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第 16 章 
< 用 CSs 美 化 表格 和 表单 样式 > 


HTML 数据 表格 和 表单 都 是 网 页 中 常见 的 元 素 ， 表 格 通常 用 来 显示 二 维 关系 数据 和 排版 ， 
从 而 达到 页 面 整齐 和 美观 的 效果 。 而 表单 作为 客户 端 和 服务 器 交流 的 窗口 , 可 以 获取 客户 端 信 
息 ， 并 反馈 服务 器 端 信息 。 


16.1 表格 样式 


在 传统 网 页 设计 中 ,表格 一 直 占 据 比 较 重 要 的 地 位 ， 它 用 来 对 网 页 排版 布局 。 基 本 上 每 个 
网 页 中 都 有 一 个 表格 来 布局 ， 它 可 以 帮助 设计 者 控制 网 页 布局 、 控 制 内 容 的 显示 等 。 使 用 表格 
排版 网 页 ， 可 以 使 网 页 更 美观 ， 内 容 更 清晰 ， 更 易于 维护 和 更 新 。 


16.1.1 ”表格 边框 样式 


在 显示 一 个 表格 数据 时 ,通常 都 带 有 表格 边框 ,用 来 界定 不 同 单元 格 的 数据 。 当 表格 的 描 
述 标 记 border 值 大 于 0 时 ， 则 显示 边框 ， 如 果 order 值 为 0， 则 不 显示 边框 。 显 示 边 框 之 后 ， 
可 以 使 用 CSS 的 border 属性 及 衍生 属性 border-collapse 对 边框 进行 修饰 ， 其 中 border 属性 表 
示 对 边框 进行 样式 、 颜 色 和 宽度 设置 ， 从 而 达到 提高 样式 效果 的 目的 ， 这 个 属性 前 面 已 经 介绍 
过 了 ， 其 使 用 方法 和 前 面 一 模 一 样 ， 只 不 过 修饰 的 对 象 变 了 。 

Border-collapse 属性 主要 用 来 设置 表格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 ,还 是 像 在 标 
准 HTML 中 那样 分 开 显示 。 其 语法 格式 为 : 

border-collapse : separate | collapse 

其 中 separate 是 默认 值 ， 表 示 边 框 会 被 分 开 ， 不 会 忽略 border-spacing 和 empty-cells 属 
性 。 而 collapse 属性 表示 边框 会 合并 为 一 个 单一 的 边框 ， 会 忽略 border-spacing 和 empty-cells 
属性 。 

【 例 16.1】〔 实 例文 件 : ch16\16.1.html) 


<html> 
<head> 
<title> 年 度 收入 </title> 
<style> 


在 正 9.0 中 浏览 效果 如 图 16-1 所 示 ， 可 以 看 到 表格 带 有 边框 显示 ， 其 边框 宽度 为 1 像素 ， 
直线 显示 ， 并 且 有 些 边框 进行 了 合并 。 表 格 标题 “2011 季度 07-09” 也 带 有 边框 显示 ， 字 号 为 
15 像素 ， 字 体 为 幼 圆 并 加 粗 显 示 。 表 格 中 的 每 个 单元 格 以 1 像素 、 直 线 的 方式 显示 边框 ， 并 
将 显示 对 象 右 对 齐 。 
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a EN 精通 HTML+CSS 只 - OX | 人 see 


坊 弓 [E) 。 喜 看 (V) 收藏 夫 (A) 工具 TM) 才 动 (H} 


| 2011 季 度 07-09 


选项 07 月 08 月 09 月 
收入 |8000|9000|7500 
吃 弧 | 600| 570| 650 
购物 | 1000| 800| 900 
买 表 股 | 300| 500| 200 
看 电影 | 85| 100| 120 
买书 | 120| 67| 90 


图 16-1 表格 样式 修饰 


对 于 上 面 的 例子 ， 我 们 会 发 现 没有 使 用 HMTL 标记 中 的 border 设置 边框 ， 而 是 使 用 CSS 
的 属性 border 来 设置 表格 边框 ， 这 样 做 可 以 在 不 同 的 浏览 器 上 显示 相同 样式 。 


16.1.2 ”表格 边框 宽度 


虽然 使 用 HIML 标记 的 描述 border 也 能 增加 表格 的 宽度 , 但 我 们 还 是 推荐 使 用 CSS 属性 
来 设置 边框 宽度 。 可 使 用 border-width 对 边框 宽度 进行 设置 ， 从 而 更 改 显 示 样式 。 如 果 需 要 单 
独 设置 某 一 个 边框 宽度 ， 可 以 使 用 border-width 的 衍生 属性 设置 ， 如 border-top-width 和 
border-left-width 等 。 

【 例 16.2】 实 例文 件 ， ch16\16.2.tml) 


<html> 

<head> 

<title> 表 格 边框 宽度 </title> 

<style> 

table{ 
text-align:center: 
width:500px: 
border-width:6px: 
border-style:double: 
color:blue: 

上 

td{ 
border-width:3px: 
border-style:dashed: 

} 

</style> 

</head> 
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<body> 
<table border=1 cellspacing="3" cellpadding="0"> 
<t> 
<td> 姓 名 </td> 
<td class=tds> 性 别 </td> 
<td> 年 龄 </td> 
</t> 
<t> 
<td> 张 三 </td> 
<td> 男 </td> 
<td>31</td> 
</u> 
<tr> 
<td> 李 四 </td> 
<td> 男 </td> 
<td>18</td> 
</u> 
</table> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 16-2 所 示 ， 可 以 看 到 表格 带 有 边框 ， 宽 度 为 6 像素 ， 显 示 样式 
为 双 线 式 ， 表 格 中 字体 颜色 为 蓝 色 。 单 元 格 边框 宽度 为 3 像素 ， 显 示 样 式 为 破 折线 式 。 


站 EA 神 有 HTML+CSS 只 - 上 X | 司 枕 IE 边框 更 变 
文件 月 ” 油 三 (E) 。 豆 看 (V) 。 收 过关 内) 工具 (D) 项 区 (H) 


姓名 性 别 


张 三 
李 四 


图 16-2 设置 表格 宽度 
16.1.3 ”表格 边框 颜色 


表格 颜色 设置 非常 简单 ， 通 常 使 用 CSS 属性 color 设置 表格 中 的 文本 颜色 ， 使 用 
background-color 设置 表格 背景 色 。 如 果 为 了 突出 表格 中 的 某 一 个 单元 格 ， 还 可 以 使 用 
background-color 设置 某 一 个 单元 格 颜色 。 

【 例 16.3】 《实例 文件 : ch16\16.3.tml) 


<html> 
<head> 
<title> 表 格 边 框 色 和 背景 色 </title> 


。256。 
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</table> 

</body> 

</htm> 

在 正 9.0 中 浏览 效果 如 图 16-3 所 示 ， 可 以 看 到 表格 带 有 边框 ， 边 框 样式 显示 为 绿色 ， 表 
格 背 景色 为 黄色 ， 其 中 一 个 单元 格 背 景色 为 蓝 色 。 


司 HiUsersAdminist D - OX | renee x | 
文件 介 。 活埋 (E] 可 看 ( 收 基 闪 以) 工具 (D) 帮助 [H) 


图 16-3 设置 边框 背景 色 
16.2 CSS 与 表单 


表单 可 以 用 来 向 Web 服务 器 发 送 数 据 ， 尤 其 是 经 常用 于 主页 页 面 一 一 用 户 输入 信息 后 将 
信息 发 送 到 服务 器 中 。 在 HTML 中 实际 使 用 的 标记 有 form、input、textarea、select 和 option。 


16.2.1 美化 表单 中 的 元 素 


表单 中 元 素 非常 多 而 且 杂 乱 ， 如 输入 框 、 按 钮 、 下 拉 菜 单 、 单 选 按钮 和 复 选 框 等 。 当 使 用 
表单 将 这 些 元 素 排列 组 合 在 一 起 的 时 候 ， 其 效果 非常 简单 ， 这 时 设计 者 可 以 通过 CSS 相关 样 
式 ， 修 饰 表单 输入 框 、 文 本 框 等 元 素 外 观 。 

在 网 页 中 , 表单 元 素 的 背景 色 默 认 都 是 白色 的 , 这 样 的 背景 色 不 能 美化 网 页 ， 所 以 可 以 使 
用 颜色 属性 定义 表单 元 素 的 背景 色 。 表 单元 素 背 景色 可 以 使 用 background-color 属性 定义 ， 这 
样 可 以 使 表单 元 素 不 那么 单调 。 使 用 示例 如 下 所 示 。 

input{ 

background-color: #ADD8E6: 
} 


上 面 代 码 设置 了 input 表单 元 素 的 背景 色 。 
【 例 16.4】〔 实 例文 件 ，ch16\16.4.tml) 


<html> 

<head> 

<style> 

Ea 

input{ 店 所 有 input 标记 */ 
color: #cad9ea: 
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} 

input.txt{ 语文 本 框 单独 设置 */ 
border: 1px inset #cad9ea: 
background-color: #ADD8E6: 

} 

input.btn{ 启 按钮 单独 设置 */ 
color: #00008B: 
background-color: #ADD8E6: 
border: 1px outset #cad9ea:; 
padding: 1px 2px 1px 2px; 

} 

select{ 
width: 80px; 
color: #00008B; 
background-color: #ADD8E6: 
border: 1px solid #cad9ea: 

} 

textarea{ 
width: 200px:; 
height: 40px: 
color: #00008B; 
background-color: #ADD8E6; 
border: 1px inset #cad9ea:; 

} 

a 

</style> 

</head> 

<body> 

<h3> 聊 天 室 注册 页 面 </h3> 


<table border="1" width="45%"> 

<form method="post"> 

<tr><td width="30%"> 上 昵称 :</td><td><input class=txt>1 一 20 个 字符 <div id="qq"></div></td></tr> 
<tr><td> 密 码 :</td><td><input type="password" > 长 度 为 6 一 16 位 </td></tr> 
<tr><td> 确 认 密 码 :</td><td><input type="password" ></td></tr> 

<tr><td> 真 实 姓名 : </td><td><input name="usemame1"></td></tr> 

<tr><td> 性 别 :</td><td><select><option> 男 </option><option> 女 </option></select></td></tr> 
<tr><td>E-mail 地 址 :</td><td><input value="sohu@sohu.com"></td></tr> 
<tr><td> 备 注 :</td><td><textarea cols=35 rows=10></textarea></td></tr> 

<tr><td><input type="button" value=" 提 交 " class=btn /></td><td><input type="reset" value=" 重 填 "/> 
</td></tr> 

</form> 


</table> 
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</body> 
/html> 
在 正 9.0 中 浏览 效果 如 图 16-4 所 示 ， 可 以 看 到 表单 中 【昵称 】 输 入 框 、【 性 别 】 下 拉 框 
和 【备注 】 文 本 框 中 都 显示 了 指定 的 背景 颜色 。 


SS 司 EVAHTML+CSS P - OX | @ ENERHTML+css 网 - x 


EECOETOECETEETUETIT 


聊天 室 注册 页 面 


图 16-4 美化 表单 元 素 


在 上 面 的 代码 中 ， 首 先 使 用 input 标记 选择 符 定义 了 input 表单 元 素 的 字体 输入 颜色 ， 下 
面 分 别 定义 了 两 个 类 txt 和 bm，txt 用 来 修饰 输入 框 样式 ，btn 用 来 修饰 按钮 样式 。 最 好 分 别 定 
义 select 和 textarean 的 样式 ， 其 样式 定义 主要 涉及 边框 和 背景 色 。 


16.2.2 ”美化 提交 按钮 


在 网 页 设计 中 ， 还 可 以 使 用 CSS 属性 来 定义 表单 元 素 的 边框 样式 ， 从 而 改变 表单 元 素 的 
显示 效果 。 例 如 ， 可 以 将 输入 框 的 上 、 左 和 右边 框 去 掉 ， 形 成 和 签名 效果 一 样 的 输入 框 ， 或 者 
将 按钮 的 4 个 边框 去 掉 ， 只 剩 下 和 超级 链接 一 样 的 按钮 。 

对 表单 元 素 边框 定义 ， 可 以 采用 border-style、border-width 和 border-color 及 其 衍生 属性 。 
如 果 要 对 表单 元 素 背 景色 进行 设置 ， 可 以 使 用 background-color 属性 ， 其 中 将 值 设 置 为 
transparent (透明 色 ) 是 最 常见 的 一 种 方式 。 使 用 示例 如 下 所 示 。 


background-color:transparent: /# 背景 色 透 明 */ 
【 例 16.5】 《实例 文件 : chl6\16.5tml) 


<html> 
<head> 
<title> 表 单元 素 边框 设置 </title> 
<style> 


区 
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<!-- 

form{ 
Iargin:0pX: 
Ppadding:Opx: 
font-size: 14px: 

} 

input{ 
font-size: 14px; 
font-family:" 幼 圆 "…: 


border-bottom:1px solid #005aa7: 证 下 划 线 效果 */ 
color:#005aa7; 

border-top:0px: border-left:Opx; 

border-right:Opx:; 

background-color:transparent: /# 背景 色 透 明 */ 


background-color:transparent: /# 背景 色 透 明 */ 
border:0px: /# 边框 取消 */ 
} 
3 
</style> 
</head> 
<body> 
<center> 
<hl> 签 名 页 </h1> 
<form method="post"> 
值班 主任 : <input id="name" class="t"> 
<input type="submit" value=" 提 交 上 一 级 签名 >>" class="n"> 
</form> 
</center> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 16-5 所 示 , 可 以 看 到 输入 框 只 剩 下 下 边框 ， 其 他 边框 被 去 掉 了 ， 
提交 按钮 只 剩 下 了 显示 文字 ， 常 见 的 矩形 形式 被 去 掉 了 。 

在 上 面 的 代码 中 ， 样 式 表 中 定义 了 两 个 类 标识 符 t 和 n，t 用 来 设置 输入 框 显 示 样式 ， 此 
处 设置 输入 框 的 左 、 上 、 下 3 个 边框 宽度 为 0， 并 设置 了 输入 框 输入 字体 颜色 为 浅 蓝 色 ， 下 边 
框 宽度 为 1 像素 ,直线 样式 显示 ， 颜 色 为 浅 蓝 色 。 在 类 标识 符 n 中 ,设置 背景 色 为 透明 色 和 边 
框 宽度 为 0， 这 样 就 去 掉 了 按钮 常见 的 矩形 样式 。 
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(Be EA 村 HTML+CSS 几 ”CX 上 臣 雪 元素 ww 生生 


文件 (F) 六 弓 (5) 。 坦 看 (V) 收 毫 关 (A) 工 中 从 


和 有 动 (H) 


签名 页 


值班 主任 : 张 三 


提交 上 一 级 签名 >>》 


图 16-5 表单 元 素 边框 设置 


16.2.3 ”美化 下 拉 菜 单 


在 网 页 设计 中 ， 有 时 为 了 突出 效果 , 会 对 文字 进行 加 粗 等 设置 ， 以 便 用 户 注 意 到 这 些 重要 
文字 。 同样 也 可 以 对 表单 元 素 中 的 文字 进行 修饰 ， 从 而 达到 突出 的 效果 。 下 拉 菜 单 是 表单 元 素 


中 常用 的 元 素 之 一 ， 其 样式 设置 非常 重要 。 


CSS 属性 不 仅 可 以 控制 下 拉 菜 单 的 整体 字体 和 边框 ， 还 可 以 对 下 拉 菜 单 中 的 每 一 个 选项 
设置 背景 色 和 字体 颜色 。 可 以 使 用 font 相关 属性 对 字体 进行 设置 ， 例 如 font-size、font-weight 


等 ， 可 以 采用 color 和 background-color 属性 对 颜色 进行 设置 。 


【 例 16.6】〔 实 例文 件 ，ch16\16.6.tml) 


<html> 

<head> 

<title> 美 化 下 拉 菜 单 </title> 

<style> 

<!-- 

.blue{ 
background-color:#7598FB: 
color: #000000: 
font-size:15pX: 
font-weight:bolder: 
font-family:" 幼 圆 "; 


Ted{ 
background-color:#E20A0A: 
color: #fFFFFF: 
font-size:15px: 
font-weight:bolder: 
font-family:" 幼 圆 ": 

用 

.yellow{ 

backeround-color:#FFFFS6F: 
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color: #000000: 
font-size:15px:; 
font-weight:bolder: 
font-family:" 幼 圆 ": 

} 

.orange{ 
background-color:orange: 
color:#000000; 
font-size: 1 5px; 
font-weight'bolder: 
font-family:" 幼 圆 ": 


</style> 
</head> 
<body> 
<form method="post"> 
<p><label for="color"> 选 择 暴 雨 预 警 信号 级 别 :</label> 
<select name="color" id="color"> 
<option value=""> 请 选择 </option> 
<option value="blue" class="blue"> 暴 雨 蓝 色 预 警 信号 </option> 
<option value="yellow" class="yellow"> 暴 雨 黄色 预警 信号 </option> 
<option value="orange" class="orange"> 暴 雨 橙色 预警 信号 </option> 
<option value="red" class="red"> 暴 十 红色 预警 信号 </option> 
</select></p> 
<p><input type="submit" value=" 提 交 "></p> 
</form> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 16-6 所 示 ， 可 以 看 到 下 拉 菜 单 中 的 每 个 菜单 项 显示 不 同 的 背景 
色 ， 用 以 和 其 他 菜单 项 区 别 。 使 用 这 种 方式 显示 选项 ， 会 提高 人 的 注意 力 ， 减 少 犯错 的 机 会 。 


本 Ei\ 糯 生 HTML+CSS 吕 - CX 
文件 月” 匆 强 (日 ”可 看 (V) ， 站 若 闪 (A) 工具 (T) 帮助 (H) 


选择 暴雨 预警 信号 级 别 : 请 选择 
[清远 大 “| 


图 16-6 ”设置 下 拉 菜单 样式 


精通 HTML+C55 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


在 上 面 的 代码 中 , 设置 了 4 个 类 标识 符 , 用 来 对 应 不 同 的 菜单 选项 。 其 中 每 个 类 中 都 设置 
了 选项 的 背景 色 、 字 体 颜色 、 大 小 和 字形 。 


16.3 ”综合 实例 1 一 一 隔行 变色 


当 使 用 表格 显示 大 量 数据 的 时 候 , 由 于 表格 的 行 和 列 比 较 多 , 若 此 时 单元 格 采 用 相同 的 背 


景色 , | 


户 在 查看 数据 时 会 感到 非常 凌乱 ， 并 且 读 数据 时 容易 出 错 。 通常 的 解决 方法 就 是 采用 


隔行 变色 ， 使 得 奇数 行 和 偶数 行 的 背景 色 不 一 样 ， 从 而 使 数据 一 目 了 然 。 本 节 将 结合 前 面 学 习 


的 知识 ， 


o1 


创建 一 个 隔行 变色 实例 。 具 体操 作 步 骤 如 下 。 


如 果 要 实现 表格 隔行 变色 ， 首 先 需要 实现 一 个 表格 ， 定 义 其 显示 样式 ， 然 后 再 设置 其 奇数 
行 和 偶然 行 显示 的 颜色 即 可 。 实 例 实现 后 ， 其 显示 效果 如 图 16-7 所 示 。 


to3 创建 HTML 页面 ， 实 现 基 本 table 表格 。 


<html> 

<head> 
<title> 隔 行 变色 </title> 
</head> 

<body> 

<h1> 设 计 优雅 数据 表格 </h1> 
<table border=1> 


<tr> 


<th> 排 名 </th> 
<th> 姓 名 </th> 
<th> 总 分 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 


</tr> 


<tr><td>1</td><td> 孔 宇 </td><td>180</td><td>91</td><td>89</td></t> 
<tr><td>2</td><td> 曹 圆 新 </td><td>176</td><td>76</td><td>100</td></t> 
<tr><td>3</td><td> 史 雅 琪 </td><td>168</td><td>83</td><td>85</td></tr> 
<tr><td>4</td><td> 曹 秀 英 </td><td>153</td><td>73</td><td>80</td></tr> 
<tr><td>5</td><td> 杨 ” 青 </td><td>146</td><td>70</td><td>76</td></tr> 


</table> 

</body> 

</html> 

在 下 9.0 中 浏览 效果 如 图 16-8 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 表格 ， 其 字体 、 边 框 等 
都 是 默认 设置 。 
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3 二 二 十 关 HsersAdminist DP- CX | 
Cae 间 EN 枉 本 HHTML+CSS D> dx| sre x ee EEC 
文件 ( 虽 。 编 综 (E) 得 看 (V) 收藏 夫 (A) 工具 (T)。 帮 动 (H) 
ye 设计 优雅 数据 表格 
排名 礁 名 和 分 语文 教学 人 姓名 总 分 语文 数学 
1 妃 字 i180 可 本 孔 宇 hn80 |91 
2 二 加 新 证 而 1 2 ”和 曹 圆 新 176 |76 
EE ws 本 3 。” 庚 绑 天 hn68 |83 
本 呈 本 4 曹 秀 英 163 73 
5 有 中 青 146 70 
16-7 ”隔行 变色 效果 图 16-8 设置 表格 
t03 添加 CSS 代码， 设置 标题 和 表格 基本 样式 。 
<style> 
hl {font-size: 16px:} 
table{ 
width:100%:; 
font-size: 12px: 
table-layout:fixed: 
empty-cells:show:; 
border-collapse:collapse: 
margin:0 auto: 
border: 1px solid #cad9ea: 
color:#666: 
} 
</style> 


代码 中 设置 了 标题 字体 大 小 为 16 像素 , 表格 字体 大 小 为 12 像素 ,边框 合并 ,边框 大 小 为 
1 像素 ， 直 线 显 示 。 其 中 empty-cells 属性 设置 是 否 显示 表格 中 的 空 单元 格 ( 仅 用 于 “分 离 边 
框 ”模式 ) ，show 表示 显示 ，hidden 表示 隐藏 。table-layout:fixed 语句 表示 表格 的 水 平 布局 仅 
仅 基 于 表格 的 宽度 、 表 格 边框 的 宽度 、 单 元 格 间距 、 列 的 宽度 ， 而 和 表格 内 容 无 关 。 

在 正 9.0 中 浏览 效果 如 图 16-9 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 表格 ， 其 大 小 充满 了 整 
个 页 面 ， 边 框 大 小 显示 为 浅 蓝 色 。 


to 弥 添加 CSS 代码， 修饰 td 和 也 单元 格 。 


th{ 
height:30px: 
overflow:hidden: 

} 

td{height:20px:} 

td,th{ 
border: 1px solid #cad9ea: 
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padding:0 lem 0: 
} 


在 下 9.0 中 浏览 效果 如 图 16-10 所 示 ， 可 以 看 到 表格 中 单元 格 高 度 加 大 ，td 增加 到 20 像 
素 ， 也 增加 到 30 像素 。 单 元 格 还 带 有 边框 显示 ， 大 小 为 1 像素 ， 直 线 样式 ， 颜 色 为 浅 蓝 色 。 


[= 
CBO wn -ox|Srsse 文件 (站 顽 者 (三 看 V) 次 大 (A) 工具 帮助 (H) | 


文件 (有 |。 六 纺 日 下 看 ()。 必 其 实 (A)。 工具 TT) 者 动 (H) 


图 16-9 设置 表格 和 标题 样式 图 16-10 设置 单元 格 样式 
iog 添加 CSS 代码， 实现 隔行 变色 。 


tr:nth-child(even){ 
background-color:#f5fafe; 
} 


在 这 里 使 用 结构 伪 类 标识 符 , 实现 了 表格 的 隔行 变色 。 在 下 9.0 中 浏览 效果 如 图 16-11 所 
示 ， 可 以 看 到 表格 中 奇数 行 显示 浅 蓝 色 。 


[=-EanEa 


起 | Hser administ P - ox | Ese 品 


文件 肯 。 半 绢 (E) 各 看 V)。 收 硬 突 (A) 工具 (帮助 (H) 
设计 优雅 数据 表格 


排名 姓名 


孔 宇 
雪 图 新 
史 雅 琪 
于 秀 英 
杨 青 


图 16-11 ”隔行 变色 
16.4 综合 实例 2 一 一 表格 图 文 网 页 布局 


文字 和 图 片 等 对 象 的 定位 是 网 页 设计 中 的 难点 , 用 表格 布局 网 页 结构 是 一 种 非常 重要 , 也 
是 最 为 常用 的 方法 ， 同 时 也 是 网 页 设计 的 重点 。 通 过 单元 格 可 以 对 文本 或 图 片 进行 定位 ， 以 达 
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到 布局 整齐 的 效果 。 本 实例 将 结合 前 面 学 习 的 知识 ,实现 通过 表格 对 图 片 和 文字 进行 布局 。 具 
体操 作 步 骤 如 下 。 


Wy 分 析 需 求 。 


使 用 表格 进行 排版 ， 需 要 先 确 定 图 文 紧 排 还 是 横 排 ， 这 样 就 确定 了 图 片 的 放置 位 置 。 如 果 
采用 竖 排 ， 可 以 创建 一 个 表格 ， 第 一 行 放置 图 片 ， 对 应 的 下 面 放置 文字 介绍 。 最 好 使 用 CSS 
样式 ， 对 图 片 、 文 字 和 表格 进行 设 定 。 实 例 完 成 后 ， 效 果 如 图 16-12 所 示 。 


W02 创建 HTML 页 面 ， 实 现 表格 基本 样式 。 


<html> 
<head> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table align=center border="1” cellspacing="4" cellpadding="0"> 
<tr> 
<td><img src="8.jpg" /><p> 时 尚 大 玩具 ! 车 展 前 实 拍 路 虎 极光 Coupe 
<p> 
</td> 
<td><img src="6jpg" /><p> 充 满 活力 的 小 家 伙 上 海 车 展 体验 奥迪 Q3 
</p></td> 
</u> 
<tr> 
<td> 路 虎 总 是 以 硬汉 的 形象 出 现在 人 们 面前 </td> 
<td> 奥 迪 将 推出 入 门 级 SUV 车 型 奥迪 Q3 时 ， 大 家 都 自然 而 然 地 觉得 这 款 车 型 是 和 宝马 X1 竞争 的 
产品 </td> 
</u> 
<tr> 
<td> 全 景 天 窗 已 经 成 为 中 高 端 SUV 的 流行 趋势 </td> 
<td> 奥 迪 Q3 相 比 两 位 兄长 有 简化 也 有 复杂 化 </td> 
</t> 
</table> 
</body> 
</html> 


上 面 的 代码 创建 了 一 个 表格 ， 第 一 行 分 别 放 置 两 个 图 片 ， 下 面 两 行 放置 文字 。 
在 正 9.0 中 浏览 效果 如 图 16-13 所 示 ，, 可 以 看 到 页 面 中 显示 了 一 个 表格 , 表格 中 包含 两 张 


精 殉 HTML+CSS 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


wa [= 一 | 


0 |e rusers Wninist 2 -cx| 每 


全 HaUser Administ P - OX 


文件 (月 效 哮 E) 下 三 (V) 履 可 实 /A) 工具 (高 动 (Hi re 
和 月 六 吉 ) 文件 站。 将 壮 |E) 至 看 V) 


2 
实 拍 .路虎 松 光 


内 工具 m。 天 动 HH) 


到 尚 大 玩具 ! 车 条 痢 实 | 充 商 舌 力 的 外 家伙 上 海 车 展 体 验 
Oe a 殉 满 活力 的 小 家 伙 上 海 车 展 体验 奥 过 
也 人 是 以 委 汉 的 开明 | 出 入 站 SLY 型 筑 03 让 
s 后 大 家 部 自 然而 然 地 个 得 这 基于 路 庆 总 是 以 硬汉 的 形象 其 家 部 个 类 在外 地 过 这 圭 浊 是 和 宝 
SEMEN | penrsnnsmrs 出 现在 人们 外 前 。 。 全 (4 况 妇 的 产品 
全 最 天 窗 己 经 式 为 中 高 各 锭 93 相 比 两 位 兄长 有 入 化 也 有 复 ee 奥 过 Q3 相 比 两 位 兄长 有 简化 也 有 复杂 化 
入 sy 的 流 生 趋势 订 化 
图 16-12 图 文 坚 排 图 16-13 创建 基本 表格 
03j 添加 CSS 代码 ， 修 饰 全 局 样式 和 表格 。 
<style> 
党 
padding:0px: 
Iargin:0pDX: 
} 
table { 


font-family:" 幼 圆 ": 
text-align:center: 
margin:10px 0 0 30px; 
background-color:#CCddCC: 
border-color:#0099ff: 
width:400px: 
font-size: 1 5px: 

= 

</style> 


上 面 的 代码 中 , 创建 了 一 个 table 标记 选择 器 , 通过 该 选择 器 设置 了 字体 样式 和 背景 样式 。 
在 下 9.0 中 浏览 效果 如 图 16-14 所 示 ， 可 以 看 到 表格 的 背景 色 为 绿色 ， 字 体 居 中 对 齐 ， 背 
to 纪 添加 CSS 代码 ， 修 饰 行 tr 和 单元 格 td。 

tl 


height:30px: 
line-height:30px: 
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} 
上 面 代码 定义 了 表格 行 的 高 度 和 文字 行 高 ， 以 及 单元 格 宽度 。 
在 正 9.0 中 浏览 效果 如 图 16-15 所 示 ， 可 以 看 到 与 图 16-14 相 比 ， 其 表格 高 度 增加 ， 行 高 
增加 。 


ED pe Em 


De ue p - ox | rex 


| 


文人 站。 办 各 查看 [V)。 收 其 (Aj 工具 (Tm 如 芭 (H) 


实 拍 :路 斋 极 光 体验 :条 连 Q3 
时 尚 大 款 呈 (于 | 充满 运力 名 后 估 哈 时 尚 大 玩具 ! 车 晨 前 实 充满 活力 的 小 家 伙 上 海 车 形体 验 
拍 路 虎 极光 Coupe 要 过 Q3 拍 聊 席 极 光 Coupe 要 直 03 


村 也 将 推出 入 门 训 SUV 车 弄 黑 过 Q3 
耻 克 癌 是 加 站 的 形 全 时 ， 大 家 重生 然而 然 地 拓 得 这 车 路 风 各 是 Di 汉 的 形象 “一 忆 闪 出 入 门 SUY 车 弄 生 过 0 
型 是 和 宝马 对 竞争 的 产品 时 ， 大 家 者 自然 而 然 邮 外 得 这 笋 手 


出 现在 人 们 中 前 


全 量 天 窗 已 经 成 为 中 高 要 到 03 想 比 两 位 兄长 有 简化 也 有 有 槛 
铺 SUV 乓 流行 招 绽 杂 比 型 是 和 宝 纪 X1 克 争 的 产品 
全 景 天 北 己 经 成 为 中 高 提包 03 相 比 两 位 兄长 有 简化 也 有 复 


足 SUV 的 流行 趋势 杂 化 


图 16-14 用 CSS 修饰 表格 图 16-15 设置 行 高 
16.5 ”综合 实例 3 一 一 变色 表格 


如 果 长 时 间 浏 览 大 量 数据 和 表格 , 即使 使 用 了 隔行 变色 , 阅读 时 间 长 了 仍然 会 让 人 感到 疲 
劳 。 如 果 数 据 行 能 动态 根据 鼠标 甚 浮 来 改变 颜色 ,就 会 使 页 面 充 满 动态 效果 ,不易 让 用 户 感到 
疲倦 。 

本 实例 将 结合 前 面 学 习 的 知识 ， 创 建 一 个 鼠标 悬浮 的 变色 表格 。 有 具体 操作 步骤 如 下 。 


首先 需要 建立 一 个 表格 , 不 单独 设置 行 的 背景 色 , 统一 采用 表格 本 身 的 背景 色 。 根据 CSS 
设置 可 以 实现 该 效果 。 仅 仅 通 过 CSS 实现 变色 表格 ， 只 是 对 Firefox 浏览 器 而 言 ， 如 果 是 正 
浏览 器 ， 需 要 结合 使 用 JavaScript。 该 实例 完成 后 ， 效 果 如 图 16-16 所 示 。 


02 创建 HTML 网页， 实现 table 表格 。 


<html> 

<head> 

<title> 变 色 表格 </title> 

</head> 

<body> 

<table border="0" cellpadding="0" cellspacing="1"> 
<caption> 

唐 宋 八 大 家 

</caption> 


在 正 9.0 中 浏览 效果 如 图 16-17 所 示 ， 可 以 看 到 页 面 中 的 表格 不 带 边框 ， 字 体 都 是 默认 显 
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站 HsersWdministraton\pe 记 - d X | 达 二 = 二 上 


人 HAUsersAdminist PD - 0 X | 并 eR 恪 


gr 
=| [23 
唐 宋 八大 家 
姓名 作品 
昔 襄 原 道 
柳宗元 三 葡 
欧阳 由 藤 靳 训 记 
荔 漳 六 改 这 
芯 饶 水 调 歌 头 
前 六 变 城 集 
曾 项 上 欧阳 舍 信 书 
王安石 僧 促 和 


16-16 变色 表格 效果 


03 添加 CSS 代码 ， 修 饰 表格 和 单元 格 . 


<style type="text/css"> 

<!-- 

table { 
width: 600px: 
margin-top: Opx: 
margin-right: auto: 
margin-bottom: Opx: 
margin-left: auto: 
text-align: center; 
background-color: #000000: 
font-size: 9pt: 


td{ 


padding: Spx: 
background-color: #FFFFFF: 


</style> 


在 下 9.0 中 浏览 效果 如 图 16-18 所 示 ， 可 以 看 到 页 面 中 的 表格 带 有 边框， 
但 列 标题 背景 色 为 黑色 ， 其 中 的 文字 不 能 够 显示 。 


级 添加 CSS 代码 ， 修 饰 标题 。 


caption{ 
font-size: 36px: 
font-family: "黑体 ". "宋体 ": 
padding-bottom: 15px: 


文件 中 光志 E)】 理 看 V) 次 天 闪 (A) 工具 (帮助 (H) 


唐 宋 八大 家 
名 品 


苏 铬 栾 城 集 
曾 巩 “上 欧阳 伟人 书 
王安石 伤 仲 永 


图 16-17 创建 基本 表格 


字体 居中 显示 ， 
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tt 
font-size: 13px:; 
background-color: #cad9ea: 
color: #000000: 


padding: Spx:; 
} 
huitd { 

background-color: #f5fafe: 
上 


上 面 的 代码 中 ， 使 用 了 类 选择 器 hui， 来 定义 每 个 td 行 所 显示 的 背景 色 ， 此 时 需要 在 表格 


中 每 个 奇数 行 都 引入 该 类 选择 器 ， 例 如 <tr class="hui">， 从 而 设置 奇数 行 背景 色 。 这 和 综合 实 


例 1 


中 对 奇数 行 背 景色 的 设置 方式 是 不 一 样 的 。 
在 下 9.0 中 浏览 效果 如 图 16-19 所 示 ， 可 以 看 到 表格 中 列 标题 一 行 背景 色 显示 为 浅 蓝 色 ， 


并 且 表 格 中 奇数 行 背景 色 为 浅 灰色 ， 而 偶数 行 背 景色 为 默认 的 白色 。 


2 


ET 


[a 
站 


重要 
简单 


16-18 ”设置 样式 图 16-19 设置 奇数 行 背景 色 


16.6 ”综合 实例 4 一 一 登录 表单 


在 设计 网 页 时 , 构建 一 个 登录 表单 是 非常 常见 的 事情 。 登 录 表单 在 验证 用 户 身份 时 扮演 着 
的 角色 ， 可 以 保护 一 些 敏感 数据 不 被 非法 用 户 访问 。 设 计 和 构建 登录 表单 时 ， 要 尽量 使 其 
， 并 且 要 避免 将 一 个 表单 用 于 多 个 任务 。 

本 实例 将 结合 前 面 学 习 的 知识 ， 创 建 一 个 简单 的 登录 表单 ， 具 体操 作 步 骤 如 下 。 


to 分 析 需 求 。 
创建 一 个 登 寻 表 单 ， 需 要 包含 3 个 表单 元 素 ， 一 个 名 称 输入 框 ， 一 个 密码 输入 框 和 两 个 按 


。 然 后 添加 一 些 CSS 代码 ， 对 表单 元 素 进行 修饰 即 可 。 实 例 完 成 后 ， 其 效果 如 图 16-20 所 
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I02 创建 HTML 网 页 ， 实 现 表单 。 


<html> 
<head> 
<title> 用 户 登 录 </title> 
<body> 
<div> 
<h1> 用 户 登 录 </h1> 
<form action="" method="post"> 
姓名 : <input type="text" id=name 放 
密码 ;<input type="password" id=password name="ps” /> 
<input type=submit value=" 提 交 " class=button> 
<input type=reset value=" 重 置 " class=button> 
</form> 
</div> 
</body> 
</html> 


在 上 面 的 代码 中 ,创建 了 一 个 div 层 用 来 包含 表单 及 其 元 素 。 
在 正 9.0 中 浏览 效果 如 图 16-21 所 示 , 可 以 看 到 显示 了 一 个 表单 ， 其 中 包含 两 个 输入 框 和 
两 个 按钮 ， 输 入 框 用 来 获取 姓名 和 密码 ， 按 钮 分 别 为 提交 按钮 和 重 置 按钮 。 


a | waniia Pp- ox]BRras «| 


(DO 


文件 (站 ”久久 则 ”三 看 (V】 改 而 (A】 工具 TT】 机 区 
EE 


Er RH) 


用 户 登 录 


姓名 ， 


用 户 登 录 


图 16-20 登录 表单 图 16-21 创建 登录 表单 
to 引 添加 CSS 代码 ， 修 饰 标题 和 层 。 


<style> 
hl{ 
font-size:20px: 
由 
div{ 
width:200px: 
padding: lem 2em 0 2em: 
font-size:12px: 
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} 
</style> 


上 面 代码 中 ， 设 置 了 标题 大 小 为 20 像素 ，div 层 宽度 为 200 像素 ， 层 中 字体 大 小 为 12 像 
素 。 在 正 9.0 中 浏览 效果 如 图 16-22 所 示 ， 可 以 看 到 标题 变 小 ， 并 且 密 码 输入 框 换 行 显示 ， 其 
布局 比 原来 的 图 片 更 加 美观 合理 。 


to 称 添加 CSS 代码 ， 修 饰 输入 框 和 按钮 。 


#name,#password{ 
border: 1px solid #ccc: 
width:160px: 
height:22px: 
padding-left:20px; 
margin:6px 0: 
line-height:20px: 


} 

.button {margin:6px 0:} 

在 下 9.0 中 浏览 效果 如 图 16-23 所 示 ， 可 以 看 到 输入 框 长 度 变 短 ， 输 入 框 边框 变 小 ， 并且 
表单 元 素 之 间距 离 增 大 ， 页 面 布 局 更 加 合理 。 


回 HAUsersAdminist 及 * CX Er Nn | 局 SEE H\UsersAdminist P - OX EE 
文件 (] ”多 强 (E) 本 看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 文件 (站 油 锋 (E) 得 看 V) 收藏 交 (A) 工具 TT) 帮助 (H) 
用 户 登录 用 户 登录 | 
姓名 : 姓名 : | 
上 
密码 : Ei 
EE 
EE | 
16-22 ”设置 层 大 小 图 16-23 用 CSS 修饰 输入 框 


16.7 综合 实例 5 一 一 注册 表单 


不 管 是 在 线 交 易 验 证 、 评 论 新 文章 ， 还 是 管理 某 个 应 用 ，Web 表单 总 会 出 现在 人 们 的 视 
线 中 。 在 网 页 上 ，Web 表单 把 用 户 、 信 息 、Web 产品 或 者 服务 连接 了 起 来 。 它 们 能 促进 销售 、 
捕 换 用 户 行为 、 建 立 沟通 与 交流 ， 以 及 更 多 。 

本 实例 中 ， 将 使 用 一 个 表单 内 的 各 种 元 素来 开发 网 站 的 注册 页 面 ， 并 用 CSS 样式 来 美化 
页 面 效果 。 具 体操 作 步 骤 如 下 。 


(QW 分 析 需 求 . 


“274 
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注册 表单 非常 简单 , 通常 包含 三 个 部 分 , 需要 在 页 面 上 方 给 出 标题 , 标题 下 方 是 正文 部 分 ， 
即 表单 元 素 ， 最 下 方 是 表单 元 素 提交 按钮 。 在 设计 这 个 页 面 时 ， 需 要 把 “用 户 注册 ”标题 设置 
成 HI 大 小 ， 正 文 使 用 p 来 限制 表单 元 素 。 实 例 完成 后 ， 实 际 效果 如 图 16-24 所 示 。 


I02 构建 HTML 页 面 ， 实 现 基 本 表单 。 


<html> 

<head> 

<title> 注 册页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 注册 </h1> 

<form method="post" > 

<p> 姓 &nbsp:&nbsp:&nbsp:&nbsp: 名 : 

<input type="text" class=txt size="12" maxlength="20" name="usermmame" /> 
</p><p> 性 &nbsp:&nbsp:&nbsp:&nbsp: 别 ; 

<input type="radio" value="male" /> 男 

<input type="radio" value="female" /> 女 

</p><p> 年 &nbsp:&nbsp:&nbsp:&nbsp: 龄 : 

<input type="text" class=txt name="age” /> 

</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel" /> 

</p><p> 电 子 邮 件 : 

<input type="text" class=txt name="email" /> 

</p><p> 联 系 地 址 : 

<input type="text" class=txt name="address" /> 

<p> 

<p> 

<input type="submit" name="submit" value=" 提 交 " class=but /> 
<input type="reset" name="reset" value=" 清 除 " class=but 放 > 
</p> 

</form> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 16-25 所 示 , 可 以 看 到 页 面 中 创建 了 一 个 注册 表单 , 包含 标题 “用 
户 注册 ”以 及 “姓名 ”、“ 性 别 ”、“ 年 龄 ”、“ 联 系 方式 ”、“ 电 子 邮 件 ”、“ 地 址 ”等 输 
入 框 和 “提交 ”按钮 等 。 其 显示 样式 为 默认 样式 。 


姓名 


性 别 。 日 男 @ 女 


图 16-24 注册 页 面 图 16-25 注册 表单 显示 


togj 添加 CSS 代码 ， 修 饰 全 局 样式 和 表单 样式 。 


在 下 90 中 浏览 效果 如 图 16-26 所 示 , 可 以 看 到 与 原来 的 页 面相 比 ,其 表单 元 素 之 间距 离 变 小 。 
04) 添加 CSS 代码， 修饰 段 落 、 输 入 框 和 按钮 。 
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color:#0066FF: 

} 

but{ 
border:0px#93bee2solid: 
border-bottom:#93bee21pxsolid: 
border-left:#93bee21pxsolid: 
border-right:#93bee21pxsolid: 
border-top:#93bee21pxsolid:*/ 
background-color:#3399CC:; 
cursorhand: 
font-style:normal: 
color:#cad9ea: 

和 


在 下 9.0 中 浏览 效果 如 图 16-27 所 示 ， 可 以 看 到 表单 元 素 带 有 背景 色 ， 其 输入 字体 颜色 为 
蓝 色 ， 边 框 颜色 为 浅 蓝 色 。 按 钮 带 有 边框 ， 按 钮 上 的 文字 颜色 为 浅 色 。 


| 7 rr cx aaa . 7 
文件 站” 多 坟 则 。 豆 要 WV] 避 训 A 工具) 如 (Hi ©. Der Se 5 
用 户 注 册 | 用 户 注册 
由 。 名 : EE 
PE 
Ea 后 本 
16-26 用 CSS 修饰 表单 样式 图 16-27 设置 输入 框 和 按钮 样式 


16.8 专家 解 惑 
1 构建 一 个 表格 时 需要 注意 哪些 方面 ? 


在 HIML 页 面 中 构建 表格 框架 时 ,应 该 尽量 遵循 表格 的 标准 标记 ， 养 成 良好 的 编写 习惯 ， 
并 适当 地 利用 tab 键 、 空 格 和 空 行 来 提高 代码 的 可 读 性 ， 从 而 降低 后 期 维护 成 本 。 特 别 是 使 用 
表格 来 布局 一 个 较 大 的 页 面 ， 需 要 在 关键 位 置 加 上 注释 。 


2. 使 用 CSS 修饰 表单 元 素 时 ， 采 用 默认 值 好 还 是 使 用 CSS 修饰 好 ? 


各 个 浏览 器 之 间 显示 的 差异 ， 其 中 一 个 原因 就 是 浏览 器 对 部 分 CSS 属性 的 默认 值 不 同 导 
致 的 ， 通 常 的 解决 办 法 就 是 指定 该 值 ， 而 不 让 浏览 器 使 用 默认 值 。 


第 17 章 
< 用 CSS 制 作 买 用 菜单 


导航 菜单 是 网 站 中 必 不 可 少 的 元 素 之 一 , 通过 导航 菜单 可 以 在 页 面 上 自由 跳 转 。 导 航 菜单 
风格 往往 影响 网 站 整体 风格 ， 所 以 网 页 设计 者 会 花费 大 量 时 间 和 精力 制作 各 式 各 样 的 导航 条 ， 
从 而 体现 网 站 总 体 风 格 。 利 用 CSS 属性 和 项 目 列 表 ， 可 以 制作 出 美观 大 方 的 导航 菜单 。 


17.1 项 目 列表 


在 HIML 语言 中 ， 项 目 列表 用 来 罗列 显示 一 系列 相关 的 文本 信息 ， 如 类 别 信息 ， 项 目 列 
表 包括 有 序 、 无 序 和 自 定 义 列表 。 当 引入 CSS 后 ， 项 目 列表 被 赋予 了 很 多 新 功能 ， 并 超越 了 
最 初 的 设计 初衷 ， 即 采用 项 目 列表 和 CSS 制作 漂亮 的 导航 菜单 。 
17.1.1 美化 无 序列 表 

无 序列 表 <ul> 是 网 页 中 常见 的 元 素 之 一 ， 可 使 用 <li> 标 记 罗列 各 个 项 目 ， 并 且 每 个 项 目前 
面 都 带 有 特殊 符号 ， 例 如 黑色 实心 圆 等 。 在 CSS 中 ， 可 以 通过 属性 list-style-type 来 定义 无 序 
列表 前 面 的 项 目 符号 。 

对 于 无 序列 表 ，list-style-type 语法 格式 如 下 所 示 : 

list-style-type : disc | circle | square | none 

其 中 list-style-type 参数 值 的 含义 ， 如 表 17-1 所 示 。 

表 17-1 list-style-type 属性 的 参数 及 其 含义 


参数 说 明 | 
disc 实心 区 | 
circle 二 | 
square 实心 方块 | 
none 不 使 用 任何 标号 | 


可 以 通过 表 17-1 中 的 参数 ， 为 list-style-type 设置 不 同 的 特殊 符号 ， 从 而 改变 无 序列 表 的 


【 例 17.1】 实例 文件 : ch17\17.1.html) 
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< 

</div> 

</body> 

</html> 

在 正 9.0 中 的 浏览 效果 如 图 17-1 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 导航 栏 ， 存 在 着 不 同 
的 导航 信息 ， 每 条 导航 信息 前 面 都 是 使 用 实心 圆 作为 每 行 信息 的 开头 。 在 上 面 的 代码 中 , 使 用 
list-style-type 设置 了 无 序列 表 中 特殊 符号 为 实心 圆 ，border 设置 了 层 div 的 边框 显示 为 红色 ， 
虚线 显示 ， 宽 度 为 1 像素 。 


全 SS 三] EN 精通 HTML+CSS 用 ”上 X | 大 元 序列 表 美 化 
文件 (F) ”编辑 (E) ”可 看 (V) ”收藏 夫 (A) ”工具 (T) 帮助 (H) 


图 17-1 无 序列 表 制 作 导 航 菜单 
17.1.2 ”美化 有 序列 表 


有 序列 表 标 记 <ol> 可 以 创建 具有 顺序 的 列表 ， 例 如 在 每 条 信息 前 面 加 上 1、2、3、4 等 。 
如 果 要 改变 有 序列 表 前 面 的 符号 ， 同 样 需要 使 用 list-style-type 属性 ， 只 是 属性 值 不 同 。 
对 于 有 序列 表 ，list-style-type 语法 格式 如 下 所 示 : 


list-style-type : decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 
其 中 list-style-type 参数 值 的 含义 ， 如 表 17-2 所 示 。 
表 17-2 有 序列 表 常用 参数 


阿拉 伯 数 字 
小 写 罗马 数字 
大 写 罗马 数字 
小 写 英文 字母 
大 写 英文 字母 
不 使 用 项 目 符号 


| lower-roman 


upper-roman 


lower-alpha 


| Upper-alpha 


Done 


除了 表 17-2 中 的 这 些 常用 参数 外 ，list-style-type 还 具有 很 多 不 同 的 参数 值 。 这 里 由 于 地 
域 习惯 , 没有 将 一 些 罕见 的 项 目 符号 罗列 出 来 , 例如 传统 的 亚美尼亚 数字 、 传统 的 乔治 数字 等 。 
在 对 list-style-type 的 支持 力度 上 ，IE 9.0 做 得 很 好 。 

【 例 17.2】 《实例 文件 :chl17\17.2.html) 
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<1i> 损 害 5 脏 的 坏 习惯 水 喝 不 够 伤 凤 </i> 
<li> 大 暑 时 节 应 重视 “以 粥 养生 ” </li> 
<li> 巧 穿 基础 白 衬 衫 装扮 高 手 必 学 法 术 </li> 
<li> 夏 裙 又 有 新 花样 拼接 图 案 最 时 里 </l> 
</ol> 

</div> 

</body> 

</html> 


在 正 9.0 中 的 浏览 效果 如 图 17-2 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 导航 栏 ， 导 航 信息 前 
面 带 有 相应 的 数字 ， 表 示 其 顺序 。 导 航 栏 具有 红色 边框 ， 并 用 一 条 蓝 线 将 题目 和 内 容 分 开 。 


[ee 知 EA 类 击 HTML+CSS ”CG X | 基肥 列表 


文件 (月 ” 编 强 (E) 。 坦 看 (V) 收藏 夫 (A) ”工具 (T) 帮助 (H) 


热点 追击 
1， 损害 5 脏 的 坏 习惯 水 喝 不 够 伤 卢 


2， 大 署 时 节 应 重视 “以 粥 养生 ” 
3. 巧 穿 基础 白 衬 衫 装扮 高 手 必 学 法 术 
4， 夏 裙 又 有 新 花样 拼接 图 案 最 时 党 


图 17-2 有 序列 表 制 作 菜单 


上 面 的 代码 中 ， 使 用 list-style-type: decimal 语句 定义 了 有 序列 表 前 面 的 符号 。 严 格 来 说 ， 
无 论 是 <ul> 标 记 还 是 <ol> 标 记 ， 都 可 以 使 用 相同 的 属性 值 ， 而 且 效 果 完 全 相同 ， 即 两 者 可 以 通 
用 。 此 处 为 了 方便 读者 学 习 ， 单 独 将 两 者 分 开 来 讲 。 


17.1.3 ”美化 自 定义 列表 


自 定 义 列表 是 列表 项 目 中 比较 特殊 的 一 个 列表 , 相对 于 无 序 和 有 序列 表 , 其 使 用 次 数 较 少 。 
如 果 要 解释 一 系列 术语 ， 使 用 自 定义 列表 就 是 很 好 的 方法 。 引 入 CSS 的 一 些 相关 属 性 ， 可 以 
改变 自 定义 列表 显示 样式 。 

【 例 17.3】 《实例 文件 :chl17\17.3.html) 


<html > 

<head> 

<style> 

*{ margin:0: padding:0:} 

body { font-size:12px: line-height:1.8: padding: 10px:} 

dl{clear:both: margin-bottom:Spx:float:left:} 

dt.dd {padding:2px Spx:float:left: border: 1px solid #3366FF:width:120px:} 
dd{ position:absolute: right:Spx:} 


A 
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hl {clear:both:font-size:14px:} 
</style> 
</head> 
<body> 
<hl> 全 部 日 志 </h1> 
<div> 
<d> 
<dt><a hre 伍 "#'> 笑 </a></dt> <dd> (0/11) </dd> </dl> 
<dl> <dt><a href="#"> 我 们 还 能 吃 什 么 </a></dt> <dd> (0/8) </dd> </dl> 
<dl> <dt><a hre 伍 "#"> 太 有 才 了 </a></dt> <dd> (0/6) </dd> </dl> 
<dl> <dt><a href="#"> 怀 念 祖父 </a></dt> <dd> (2/11) </dd> </dl> 
<dl> <dt><a href="#"> 学 人 二 十 四 要 </a></dt> <dd> (0/9) </dd> </dl> 
<dl> <dt><a hre 伍 "#"> 精 英 教育 和 普及 教育 </a></dt> <dd> (0/2) </dd> </dl> 
<dl> <dt><a href="#"> 看 青春 剧 有 感 </a></dt> <dd> (0/1) </dd> </dl> </div> 


</body> 
</html> 


在 下 9.0 中 的 浏览 效果 如 图 17-3 所 示 ， 可 以 看 到 页 面 中 显示 一 个 日 志 导航 菜单 ， 每 个 选 
项 都 有 蓝 色 边框 ， 并 且 后 面 带 有 浏览 次 数 。 上 面 的 代码 中 ， 通 过 使 用 border 属性 设置 边框 ， 
使 用 font 属性 设置 文本 大 小 、 颜 色 等 。 


| 间 EN 性 盏 HTML+CSS nD "Cx 居 EHTML+ C55 x 
| 文件 (顽强 (E) 得 看 ) 。 收 苹 闪 (A) 工具 (T) 帮助 (H) 
全 部 日 志 
答 C0111) 
到 [1 卫 能 路 什么 (0/8) 
太 有 才 了 (0/6) 
怀念 祖父 《2711)》 
学 人 = 十 四 要 (0/9) 
畏 英 教育 和 普及 教育 (0/2) 
看 青春 剧 有 三 Co/1) 


图 17-3 ”使 用 自 定义 列表 制作 导航 菜单 
17.1.4 图 片 列表 
对 于 有 序列 表 或 无 序列 表 , 不 但 可 以 通过 list-style-type 改变 选项 前 面 的 特殊 符号 , 还 可 以 
使 用 list-style-image 属性 将 每 项 前 面 的 项 目 符号 蔡 换 为 任意 的 图 片 。 


list-style-image 属性 用 来 定义 作为 一 个 有 序 或 无 序列 表 项 标志 的 图 像 。 图 像 相对 于 列表 项 
内 容 的 放置 位 置 通常 使 用 list-style-position 属性 控制 。list-style-image 的 语法 格式 如 下 所 示 : 
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list-style-image : none | Url (url) 


上 面 属性 值 中 ，none 表示 不 指定 图 像 ，url 表示 使 用 绝对 路 径 和 相对 路 径 指定 背景 图 像 。 
【 例 17.4】 《实例 文件， ch17\17.4.html) 


<html> 
<head> 
<title> 图 片 符号 </title> 
<style> 
二 
uf 
font-family:Arial: 
font-size: 13px: 
color:#00458c; 
list-style-type:none: 店 不 显示 项 目 符号 */ 


list-style-image:url(6.jpe): 
padding-left:25px: 族 设置 图 标 与 文字 的 间隔 */ 
width:350px:; 


</style> 
</head> 
<body> 
<p> 健 康 </p> 
<u> 
<li> 常 吃 10 种 食物 有 效 预 防 疾病 更 长 寿 11:41 </li> 
<li> 养 生 有 禁忌 :国人 饮食 习惯 存 9 大 缺陷 13:26 </li> 
<1i> 夏 日 食谱 帮 苦 问 孕 妈 促 食欲 14:20 </li> 
<1i> 夏 日 养生 特别 重要 ! 食补 养生 吃 这 些 13:26 </li> 
<1li> 菜 肴 做 法 是 否 存在 健康 隐患 国人 饮食 习惯 9 大 缺陷 13:04 </li> 
</ul> 
</body> 
</html> 


在 正 9.0 中 的 浏览 效果 如 图 17-4 所 示 ， 可 以 看 到 页 面 中 显示 一 个 导航 栏 ， 每 个 导航 菜单 
i 都 有 一 个 小 图 标 。 

在 上 面 代码 中 ， 使 用 list-style-image:url(6.jpg) 语 句 定义 了 列表 前 显示 的 图 片 ， 实 际 上 还 可 
以 使 用 background:url(6.jpg) no-repeat 语句 完成 这 个 效果 ， 只 不 过 background 对 图 片 大 小 的 要 
求 比较 苛刻 。 


前 I 
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了 
a em:css P - cx 
文件 (有 ) ” 注 强 (E) 。 豆 看 (V) ”站 功 实 (A) 


案 临 10 种 食物 有 效 预 防 疾 病 更 长 邦 11.41 
养生 有 禁忌 国人 饮食 习 避 存 9 大 某 陷 13.26 
夏 日 食谱 帮 震 间 孕 舟 促 食 繁 
夏 日 养生 特别 重要 ! 食补 养 
菜 朋 仙 法 是 否 存在 健康 隐患 


宏 史 安室 宏 让 


图 17-4 制作 图 片 导航 栏 
17.1.5 “列表 缩 进 


使 用 图 片 作 为 列表 符号 显示 时 , 图 片 通常 显示 在 列表 的 外 部 , 实际 上 还 可 以 将 图 片 列 表 中 
的 文本 信息 对 齐 ， 从 而 显示 另外 一 种 效果 。 在 CSS 中 ， 可 以 通过 list-style-position 来 设置 图 片 
显示 位 置 。 

list-style-position 属性 语法 格式 如 下 所 示 : 


list-style-position : outside | inside 
其 属性 值 及 含义 ， 如 表 17-3 所 示 。 
表 17-3 ”列表 缩 进 属性 值 


ES 


| outside ”| 列表 项 目标 记 放置 在 文本 以 外 ， 且 环绕 文本 不 根据 标记 对 齐 
| inside ”| 列表 项 目标 记 放置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 


【 例 17.5】 实例 文件 :ch17\17.5.html) 


<html> 

<head> 

<title> 图 片 位 置 </title> 

<style> 

list1{ 
list-style-position:inside:} 

list2{ 
list-style-position:outside:} 

.Content{ 
list-style-image:url(6.jpe): 
list-style-type:none: 
font-size:24px: 

} 

</style> 
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</head> 
<body> 
<ul class=content> 
<li class=list1> 穴 位 按摩 减肥 法 是 时 下 较为 热门 的 减肥 方法 之 一 ， 由 于 其 操作 方便 、 无 副作用 的 优 
点 受到 众多 都 市 女性 的 青睐 。</li> 
<li class=list2> 穴 位 按摩 减肥 法 是 时 下 较为 热门 的 减肥 方法 之 一 ， 由 于 其 操作 方便 、 无 副作用 的 
优点 受到 众多 都 市 女性 的 青睐 。<li> 
</ul> 
</body> 
</html> 


在 下 9.0 中 的 浏览 效果 如 图 17-5 所 示 ， 可 以 看 到 一 个 图 片 列表 ， 第 一 个 图 片 列表 选项 中 
图 片 和 文字 对 齐 ， 即 放 在 文本 信息 以 内 , 第 二 个 图 片 列表 选项 没有 和 文字 对 齐 , 而 是 放 在 文本 
信息 以 外 。 


二 [eis 

C J esa cssmmsa D - ox | BE- os “| | 
文件 站 注 坟 (E) 下 看 收藏 灾 A。 工具 (T) 名 助 (H) 

拔 穴 位 按摩 减肥 法 是 时 下 较为 热门 的 减肥 方法 之 一 ， 
ts 无 副作用 的 优点 受到 众多 都 市 女性 
鬼 穴 位 按摩 减肥 法 是 时 下 较为 热门 的 减肥 方法 之 一 ， 由 

Ed 无 副作用 的 优点 受到 众多 都 市 女性 的 


图 17-5 图 片 缩 进 
17.1.6 ”列表 复合 属性 


在 前 面 的 章节 中 ， 分 别 使 用 了 list-style-type 定义 列表 的 项 目 符号 ,使 用 list-style-image 定 
义 列表 的 图 片 符号 选项 ， 使 用 list-style-position 定义 图 片 显 示 位 置 。 实 际 上 在 对 项 目 列表 操作 
时 ， 可 以 直接 使 用 一 个 复合 属性 list-style， 将 前 面 的 三 个 属性 放 在 一 起 设置 。 

list-sytle 语法 格式 如 下 所 示 : 


{list-style: sStyle } 
其 中 sStyle 指定 或 接收 以 下 值 ( 任 意 次 序 ， 最 多 3 个 ) 的 字符 串 ， 如 表 17-4 所 示 。 
表 17-4 list-style 常用 属性 


可 供 list-style-image 属性 使 用 的 图 像 值 的 任意 范围 


| 可 供 list-style-position 属性 使 用 的 位 置 值 的 任意 范围 
可 供 list-style-type 属性 使 用 的 类 型 值 的 任意 范围 
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【 例 17.6】〔 实 例文 件 : ch17\17.6.html) 


<html> 
<head> 
<title> 复 合 属性 </tile> 
<style> 
#test1l 
list-style:square inside url("6.jpg"); 


#test2 
{ 


list-style:none: 


<li id=test1> 养 生 指 南 : 心灵 瑜珈 舒 解 心理 重负 。</li> 
<li id=test2> 养 生 指南 : 心灵 瑜珈 舒 解 心 理 重负 。</li> 
</ul> 
</body> 
</html> 
在 焉 9.0 中 的 浏览 效果 如 图 17-6 所 示 ， 可 以 看 到 页 面 中 显示 两 个 列表 选项 ， 一 个 列表 选 
项 中 带 有 图 片 ， 另 一 个 列表 中 没有 符号 和 图 片 显示 。 


(CA ewanmcss Pp- ox 


文件 (篇 妾 (E) ”各 看 (V) ”收藏 突 (A) 工具 (TD) 。 帮助 (H) 


县 # 养 生 指南 : 心灵 瑜珈 舒 解 心理 重负 。 
养生 指南 ; 心灵 瑜珈 舒 解 心理 重负 。 


17-6 ”使 用 复合 属性 指定 列表 


list-style 属性 是 复合 属性 。 在 指定 类 型 和 图 像 值 时 ， 除 非 将 图 像 值 设置 为 none 或 无 法 显 
示 URL 所 指向 的 图 像 ， 否 则 图 像 值 的 优先 级 较 高 。 例 如 在 上 面 的 例子 中 ， 类 testl 同时 设置 了 
符号 为 方块 符号 和 图 片 ， 但 只 显示 了 图 片 。 
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17.2 无 需 表格 的 菜单 


项 目 列表 在 引入 CSS 之 后 ， 其 功能 和 作用 就 大 大 增强 了 ， 即 可 以 制作 出 各 式 各 样 的 菜单 
和 导航 条 。 在 制作 导航 条 和 菜单 之 前 ， 需 要 将 list-style-type 值 设置 为 none， 即 去 掉 列表 前 的 
项 目 符号 。 

下 面 通过 一 个 实例 ,介绍 如 何 创建 一 个 菜单 导航 条 。 该 实例 完成 后 ， 效 果 如 图 17-7 所 示 。 

首先 创建 HTML 文档 ， 实 现 一 个 无 序列 表 ， 列 表 中 的 选项 表示 各 个 菜单 。 

【 例 17.7】 《实例 文件 ， ch17\17.7.html) 


<html> 
<head> 
<title> 无 需 表格 菜单 </title> 
</head> 
<body> 
<div> 
<u> 
<li><a hre 伍 "#"> 首 页 </a></li> 
<li><a hre 伍 "#"> 产 品 </a></li> 
<li><a hre 人 ="#"> 下 载 </a></li> 
<li><a href="#"> 购 买 </a></li> 
<li><a hre 伍 "#"> 服 务 </a></li> 
</ul> 
</div> 
</body> 
</html> 


上 面 代码 中 ， 创 建 一 个 div 层 ， 在 层 中 放置 了 一 个 ul 无 序列 表 ， 列 表 中 的 各 个 选项 就 是 
将 来 所 使 用 的 菜单 。 

在 正 9.0 中 浏览 效果 如 图 17-8 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 无 序列 表 ， 每 个 选项 带 
有 一 个 实心 圆 。 


上] EN 情 通 HTML+CSS 名 ”0 X | 局 元 雪夫 人 = 兰 


| 文件 (Fi 痊 哩 (E]) 得 看 (V) 收藏 夫 (A) 工具 (T) 帮 动 (H) 
车 :是 
产 吕 : 絮 
下 载 
购买 
服务 


17-7 列表 菜单 17-8 ”显示 项 目 列表 
然后 可 以 利用 CSS 相关 属性 ， 对 HIML 中 的 元 素 进行 修饰 ， 例 如 div 层 、ul 列表 和 body 
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洁 


。 其 代码 如 下 所 示 : 


body{ 
background-color:#84BAES; 


width:200px: 
font-family:" 幼 圆 ": 

上 

divul{ 
list-style-type:none: 
margin:Opx; 
padding:0px: 

} 

2 

</style> 


在 正 9.0 中 的 浏览 效果 如 图 17-9 所 示 , 可 以 看 到 项 目 列表 变 成 一 个 普通 的 超级 链接 列表 ， 
无 项 目 符号 并 带 有 下 划 线 。 


mm mm 
| Ce 国 HA\UsersAdminist DD - 0 X | 局 天 过 


文件 ” 坊 强 (E) 下 看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 


图 17-9 链接 列表 
接 下 来 可 以 对 列表 中 的 各 个 选项 进行 修饰 ， 例 如 去 掉 超 级 链接 下 的 下 划 线 ， 并 增加 1 标 
记 下 的 边框 线 ， 从 而 增强 菜单 的 实际 效果 。 


divli{ 
border-bottom:1px solid #ED9F9F: 
} 
divlia{ 
display:block: 
padding:Spx Spx Spx 0.5em: 
text-decoration:none: 
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border-left:12px solid #6EC61C: 
border-right:1px solid #6EC61C: 
了 


在 上 面 代码 中 需要 注意 的 语句 是 display:block， 此 语句 定义 了 超级 链接 被 设置 成 块 元 素 ， 
即 当 鼠标 进入 这 个 区 域 时 就 被 激活 ， 而 不 是 仅仅 通过 文字 激活 。 对 于 display 相关 属性 ， 会 在 
后 面 章 节 中 重点 介绍 。 

在 正 9.0 中 的 浏览 效果 如 图 17-10 所 示 , 可 以 看 到 每 个 选项 中 ,超级 链接 的 左 方 显示 蓝 色 
条 ， 右 方 显示 蓝 色 线 。 每 个 链接 下 方 显示 一 个 黄色 边框。 


图 17-10 区 块 设置 


当 基本 样式 设 定 完成 后 ,就 可 以 设置 导航 菜单 条 中 最 常见 的 样式 一 一 动态 菜单 效果 了 , 即 
当 和 鼠标 其 浮 在 导航 菜单 上 时 显示 另外 一 种 样式 。 
div li a:link, div li a:visited{ 
background-color:#FOFOF0: 
Color:#461737: 
b 
div li a:hover{ 
background-color:#7C7C7C: 
color:#ffff00: 
} 


上 面 的 代码 设置 了 鼠标 链接 样式 、 访 问 后 的 样式 和 甚 浮 时 的 样式 。 
在 正 9.0 中 浏览 效果 如 图 17-11 所 示 ， 可 以 看 到 鼠标 悬浮 在 菜单 上 时 ， 选 项 会 显示 灰色 。 


由 evwnyusersyadminisratovporumentsyl7.7mtmlz 


17-11 “导航 菜单 


i 
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17.3 ”菜单 的 横竖 转换 


在 实际 的 网 页 设计 中 ， 由 于 题材 或 业务 需求 不 同 , 垂直 导航 菜单 有 时 不 能 满足 要 求 , 这 时 
就 需要 导航 菜单 水 平 显示 。 例 如 常见 的 百度 首页 ， 其 导航 菜单 就 是 水 平 显示 。 通 过 CSS 属性 ， 
不 但 可 以 创建 垂直 导航 菜单 ， 还 可 以 创建 水 平 导航 菜单 。 

该 实例 完成 后 ， 其 效果 如 图 17-12 所 示 。 


创建 水 平 导航 菜单 和 创建 垂直 导航 菜单 ， 前 面 步骤 基本 相同 。 首 先 需要 建立 HTML 项 目 
列表 结构 ， 将 要 创建 的 菜单 项 都 由 列表 选项 显示 出 来 。 然 后 利用 CSS 设置 页 面 背景 色 ; 设置 
项 目 列表 中 的 每 个 选项 样式 ， 去 掉 每 个 选项 前 面 的 项 目 符号 ; 设置 层 div 中 的 字体 样式 ， 但 此 
处 不 需要 设置 div 块 。 

【 例 17.8】 《实例 文件 ，ch17\17.8.html) 


<html> 
<head> 
<title> 菜 单 横竖 转换 </title> 
<style> 
<!-- 
body{ 
background-color:#84BAES8: 
} 
div{ 
font-family:" 幼 圆 ": 
} 
divul{ 
list-style-type:none: 
margin:Opx: 
了 padding:0px: 
} 
</style> 
</head> 
<body> 
<div id="navigation"> 
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<ul> 
<li><a hre 伍 "#"> 首 页 </a></li> 
<li><a hre 伍 "#"> 产 品 </a></li> 
<li><a hre 伍 "#"> 下 载 </a></li> 
<li><a hre 伍 "#"> 购 买 </a></li> 
<li><a href="#"> 服 务 </a></li> 


在 下 9.0 中 浏览 效果 如 图 17-13 所 示 , 可 以 看 到 页 面 中 显示 的 是 一 个 普通 的 超级 链接 列表 ， 
和 例 17.7 中 显示 的 基本 一 样 。 


图 17-13 ”链接 列表 


现在 是 垂直 显示 导航 菜单 ， 需 要 利用 CSS 属性 float 将 其 设置 为 水 平 显示 ， 并 设置 选项 
和 超级 链接 的 基本 样式 ， 代 码 如 下 所 示 。 


divli{ 
border-bottom: 1px solid #ED9F9F: 
float:left: 
width:150px: 
} 
divlia{ 
display:block: 
padding:5px Spx 5px 0.5em: 
text-decoration:none: 
border-left:12px solid #EBEBEB: 
border-right: 1px solid #EBEBEB: 
} 


当 float 属性 值 为 left 时 ， 导 航 栏 为 水 平 显示 。 其 他 设置 基本 和 例 17.7 相同 。 在 正 9.0 中 
浏览 效果 如 图 17-14 所 示 ， 可 以 看 到 各 个 链接 选项 水 平 排列 在 当前 页 面 之 上 。 
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图 17-14 列表 水 平 显示 
下 面 设置 超级 链接 <a> 的 样式 ， 和 前 面 一 样 ， 也 设置 了 鼠标 动态 效果 。 代 码 如 下 所 示 。 


div li a:link, div li a:visited{ 
background-color:#FOFOFO; 
color:#461737: 

上 

div li a:hover{ 
background-color:#7C7C7C: 
color:#ffff00: 

| 


在 下 9.0 中 浏览 效果 如 图 17-15 所 示 ， 可 以 看 到 当 鼠 标 放 到 菜单 之 上 时 ， 会 变换 为 另 一 种 
样式 。 


I 水 平 菜单 显示 
17.4 综合 实例 1 一 一 段落 模拟 列表 效果 


CSS 是 伟大 的 ， 通 过 它 可 以 变换 不 同 的 样式 。 可 以 让 列表 代 蔡 table 表格 制作 出 表格 ， 同 
样 也 可 以 让 一 个 段落 模拟 项 目 列表 。 本 实例 将 利用 前 面 介绍 的 CSS 知识 ， 将 段落 变换 为 一 个 
列表 。 具 体 步骤 如 下 所 示 。 


0 分 析 需 求 。 


要 实现 这 个 实例 , 需要 创建 一 个 div 层 , 用 于 包含 各 个 不 同 的 段落 , 以 方便 设置 整体 布局 。 
该 实例 实现 后 ， 效 果 如 图 17-16 所 示 。 


2 创建 HTML， 实 现 基 本 段落 。 


4 
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从 上 面 的 分 析 可 以 看 出 ，HTML 中 需要 包含 一 个 div 层 ， 几 个 段落 。 其 代码 如 下 所 示 。 


<html> 
<head> 
<title> 模 拟 列表 </title> 
</head> 
<body> 
<div class="big"> 
<p ”class="one">。 英 国 两 头 小 猪 遭 主人 弃 养 游泳 千 米 找 回 家 (图 ) 新 浪 网 7 小 时 前 ”</p> 
<p> 。7 岁 女 孩 参加 小 区 游泳 培训 班 溺 亡 警方 调查 腾讯 网 8 小 时 前 </p> 
<p class="one"> 。 总 局 为 姚明 举办 退役 仪式 送 上 最 高 荣誉 和 敬意 搜狐 网 21 小 时 前 </p> 
<p> 。 姚 明 获 总 局 多 项 至 高 殊荣 大 姚 告别 礼 吓 咽 离 去 腾讯 网 12 小 时 前 </p> 
<p class="one"> 。 大 学 生 五 人 制 联赛 官网 上 线 推动 高 校 足球 事业 腾讯 网 6 小 时 前 </p> 
</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 17-17 所 示 ， 可 以 看 到 页 面 中 显示 5 个 段落 , 每 个 段落 前 面 都 使 
用 特殊 符号 “。 ”引领 每 一 行 。 


hevonrep examne 
HD RE EV RN RD 0) 


~ oa EHIML+CSS PO x | © mnie 
文 吕 明 。 济 颖 (5) 香 看 (V) 。 履 项 闪 IA) 工具 [部 区 (HI) 


民国 两 头 小 清 遭 主人 弃 养 游泳 二 米 找 回 家 (图 ) 新 染 网 ?小 时 前 


由 |. 史 雪 也 加 小 区 浅说 员 BE 届 上 区 方 调查 明 讯 网 sd 前 
上 总 局 为 姚明 举办 退役 仪 式 送 上 最 高 荣誉 和 激 意 搜狐 网 21 小 时 前 
“姚明 获 总 局 多 项 至 高 珠 荣 大 姚 告别 礼 顺 咽 高 去 本 讯 网 12 小 时 前 

上 太 学 生 五 人 制 联赛 官网 上 线 推动 高 校 足球 事业 烽 讯 网 6 小 时 前 


图 17-16 段落 模拟 列表 
四 3) 添加 CSS 代码 ， 修 饰 整体 div 层 。 


<style> 
-big { 
width:450px: 
border:#990000 1px solid: 
} 
</style> 


1 7] 岁 女孩 参加 小 区 游泳 培训 班 涡 亡 警方 调查 腾讯 网 8 小 时 前 


诅 生 仪式 涝 上 最 高 荣誉 和 丝 章 搜狐 网 21 小 时 前 
多 项 至 高 四 荣 大 好 告别 礼 咽 呈 高 去 爱 讯 网 12 小 时 前 
"大 学 生 五 人 制 腾 赛 官网 上 线 推动 高 校 足球 束 业 腾讯 网 6 小 时 前 


17-17 段落 显示 


此 处 创建 了 一 个 类 选择 器 ， 其 属性 定义 了 层 的 宽度 ， 层 带 有 边框 ， 以 直线 形式 显示 。 
在 下 9.0 中 浏览 效果 如 图 17-18 所 示 ， 可 以 看 到 段落 周围 显示 了 一 个 矩形 区 域 ， 其 边框 显 


示 为 黄色 。 


to 级 添加 CSS 代码 ， 修 饰 段落 属性 。 


用 CSS 制作 实用 菜单 ”第 /7 党 


pl 
margin:10px 0 5px 0: 
font-size:14px: 
color:#025BD!1; 


上 面 代码 定义 了 段落 p 的 通用 属性 ， 即 字体 大 小 和 颜色 。 使 用 类 选择 器 定义 了 特殊 属性 ， 
带 有 下 划 线 ， 具 有 不 同 的 颜色 。 

在 正 9.0 中 浏览 效果 如 图 17-19 所 示 , 可 以 看 到 与 图 17-18 相 比 , 其 字体 颜色 发 生 了 变化 ， 
并 带 有 下 划 线 。 


Ez 5 本 看 (WV) 收 项 闪 (A) 工具 (T 关 动 (H) 
| [项 国 两 天 小 猪 下 主人 弃 养 浇 泳 千 米 找 回 家 (图 新 浪 网 7 小 时 前 
| 7 岁 女 孩 参 加 小 区 游泳 培训 班 肖 亡 警方 调查 腾讯 网 8 小 时 前 
总局 为 姚明 举办 退役 仪式 送 上 最 高 荣誉 和 敬意 搜狐 网 21 小 时 


kt 明 获 总 局 多 项 至 高 殊荣 大 姚 告别 礼 别 咽 高 去 腾讯 网 12 小 时 


大 学 生 五 人 制 联赛 官网 上 线 推动 高 校 足球 事业 腾讯 网 6 小 时 前 | 


图 17-18 设置 div 层 图 17-19 修饰 段落 属性 


17.5 ”综合 实例 2 一 一 模拟 soso 导航 栏 


作为 一 个 搜索 引擎 网 站 , 搜 搜 知名 度 越 来 越 高 了 。 打 开 其 首页 ， 可 以 看 到 一 个 水 平 导航 菜 
单 ， 通 过 这 个 导航 可 以 搜索 不 同类 别 的 内 容 。 本 实例 将 结合 本 章 学 习 的 导航 菜单 知识 ,轻松 实 
现 搜 搜 导航 栏 。 

本 实例 的 宗旨 是 实现 水 平 导航 栏 ， 其 他 方面 没有 过 多 定义 。 要 实现 该 实例 ,具体 步骤 如 下 
所 示 。 


OY 分 析 需 求 。 


该 实例 需要 包含 3 个 部 分 ， 第 一 部 分 是 soso 图 标 ， 第 二 部 分 是 水 平 菜单 导航 栏 ， 也 是 本 
实例 的 重点 , 第 三 部 分 是 表单 部 分 , 包含 输入 框 和 按钮 。 该 实例 实现 后 , 其 实际 效果 如 图 17-20 
所 示 。 
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to3 创建 HTML 网 页 ， 实 现 基本 HTML 元 素 。 


对 于 本 实例 ， 需 要 利用 HTML 标记 实现 搜 搜 图 标 、 导 航 的 项 目 列表 、 下 方 的 搜索 输入 杠 
和 按钮 等 。 其 代码 如 下 所 示 。 


<html> 
<head> 
<title> 搜 搜 </title> 
</head> 
<body> 
<center><br><img src="logo_index .pne"><br><br><br><br> 
<div> 
<ul> 
<liid=h></li> 
<li><a hre 伍 "#"> 网 页 </a></li> 
<li> <a hre 伍 "#"> 图 片 </a></li> 
<li> <a href="#"> 视 频 </a></li> 
<li><a hre 伍 "#"> 音 乐 </a></li> 
<li><a hre 伍 "#"> 搜 吧 </a></li> 
<li><a hre 伍 "#"> 问 问 </a></li> 
<li><a hre 伍 "#"> 团 购 </a></li> 
<li><a hre 伍 "#"> 新 闻 </a></li> 
<li><a hre 伍 "#"> 地 图 </a></li> 
<liid="more"><a hre 人 ="#"> 更 多 &gt:&gt:</a></li> 
</ul> 
</div> 
<p style="height:44px:">&nbsp;</p> 
<div id=s> 
<form action="/q?" id="flpage" name="flpage"> 
<input type="text" value="" size=50px:/> 
<input type="submit" value=" 搜 搜 "> 
</form> 
</div> 
</center> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 17-21 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 图 片 ， 即 搜 搜 图 标 ， 中 
间 显 示 了 项 目 列表 ， 每 个 选项 都 是 超级 链接 。 下 方 是 一 个 表单 ， 包 含 输入 框 和 按钮 。 
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图 17-20 ”模拟 搜 搜 导航 栏 图 17-21 页 面 框架 
to3 添加 CSS 代码， 修饰 项 目 列表 。 


框架 出 来 之 后 ， 就 可 以 修改 项 目 列表 的 相关 样式 了 ， 即 使 列表 水 平 显 示 ， 同 时 定义 整个 
div 层 属 性 ， 例 如 设置 背景 色 、 宽 度 、 底 部 边框 和 字体 大 小 等 。 代 码 如 下 所 示 。 


Pp{ margin:0px: padding:Opx:} 

#div{ 
margin:Opx auto: 
font-size:12px; 
padding:Opx; 
border-bottom: 1px solid #00c: 
background:#eee: 
width:800px:height: 18px: 


Fi 


} 
divli{ 
float:left: 
list-style-type:none: 
Imargin:0px:padding:0px: 
width:40px: 
让 
上 面 代码 中 ,float 属性 设置 菜单 栏 水 平 显 示 , list-style-type 属性 设置 了 列表 不 显示 项 目 符 
号 。 在 下 9.0 中 浏览 效果 如 图 17-22 所 示 ， 可 以 看 到 页 面 整 体 效果 和 搜 搜 首页 比较 相似 ， 下 面 
就 可 以 在 细节 上 做 进一步 修改 了 。 


to 弥 添加 CSS 代码， 修饰 超 级 链接 。 
divliaf 


display:block: 
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text-decoration:underline: 
了 padding:4px Opx Opx 0px: 
Iargin:0pX: 
font-size:13px: 

} 

div li a:link, div li a:visited{ 
color:#004276; 

} 


上 面 的 代码 设置 了 超级 链接 , 即 导航 栏 中 菜单 选项 中 的 相关 属性 ,例如 超级 链接 以 块 显示 、 
文本 带 有 下 划 线 、 字 体 大 小 为 13 像素 ， 并 设 定 了 鼠标 访问 超级 链接 后 的 颜色 。 
在 正 9.0 中 浏览 效果 如 图 17-23 所 示 ， 可 以 看 到 字体 颜色 发 生 了 改变 ， 字 号 也 变 小 了 。 
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EE 


17-22 水 平 菜单 栏 17-23 ”设置 菜单 样式 

W035 添加 CSS 代码 ， 定 义 对 齐 方式 和 表单 样式 。 
div li#h{width:180px:height:18px:} 
div li#more {width:85px:height: 18px:} 
#s{ 

background-color:#006EB8: 

width:430px: 
上 
上 述 代码 中 , h 定义 了 水 平 菜单 最 前 方 空间 的 大 小 ，more 定义 了 更 多 的 长 度 和 宽度 ，s 定 

义 了 表单 背景 色 和 宽度 。 

在 正 9.0 中 浏览 效果 如 图 17-24 所 示 ， 可 以 看 到 水 平 导航 栏 和 表单 对 齐 ， 表 单 背景 色 为 蓝 色 。 
tQgj 添加 CSS 代码 ， 修 饰 访问 时 的 样式 。 


<a href="#" style="text-decoration:none:color:#020202:font-size:14px:"> 网 页 </a> 


ye 
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此 代码 段 设置 了 被 访问 时 的 默认 样式 .在 IE 9.0 中 浏览 效果 如 图 17-25 所 示 , 可 以 看 到 “网 
页 ”菜单 选项 被 访问 时 ， 文 字 颜 色 为 黑色 ， 不 带 有 下 划 线 。 
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图 17-24 设置 菜单 选项 大 小 图 17-25 ” 搜 搜 最 终 效 果 


17.6 专家 解 惑 


1. 使 用 项 目 列表 和 table 表格 制作 表单 时 ， 项 目 列表 有 了 哪些 优势 ? 


采用 项 目 列表 制作 水 平 菜 单 时 ， 如 果 没 有 设置 <ul> 标 记 的 宽度 width 属性 ， 那 么 当 浏 览 器 
的 宽度 缩小 时 ， 菜 单 会 自动 换行 。 这 是 采用 <table> 标 记 制 作 菜单 所 无 法 实现 的 ， 所 以 项 目 列 
表 经 常 被 使 用 ， 以 实现 各 种 变换 效果 。 


2. 使 用 IE 浏览 器 打开 一 个 项 目 列表 ， 设 定 的 项 目 符号 为 何 没 有 出 现 ? 


下 浏览 器 对 项 目 列表 的 符号 支持 不 是 太 好 ， 只 支持 一 部 分 项 目 符号 , 这 时 可 以 采用 正 9.0 
浏览 器 。IE 9.0 浏览 器 对 项 目 列表 符号 支持 力度 比较 大 。 


3. 使 用 url 引入 图 像 时 ， 加 引号 好 ， 还 是 不 加 引号 好 ? 


不 加 引号 好 。 需 要 将 带 有 引号 的 修改 为 不 带 引号 的 。 例 如 将 background:url("xxx.gif") 改 为 
background:url(xxx.gif)。 
因为 对 于 部 分 浏览 器 而 言 加 引号 反而 会 引起 错误 。 


第 18 章 
< CSS 汇 镜 的 薄 用 > 


随 着 网 页 设计 技术 的 发 展 ， 人 们 已 经 不 满足 于 单调 地 展示 页 面 布 局 并 显示 文本 , 而 是 希望 
在 页 面 中 能 够 加 入 一 些 多 媒体 特效 而 使 页 面 丰富 起 来 。 使 用 滤 镜 能 够 实现 这 些 需求 , 它 能 够 产 
生 各 种 各 样 的 文字 或 图 片 特效 ， 从 而 大 大 提高 页 面 的 吸引 力 。 


18.1 ” 渡 镜 概述 


CSS 滤 镜 是 正 9.0 浏览 器 厂商 为 了 增加 浏览 器 功能 和 竞争 力 ， 而 二 目 失 出 的 一 种 网 页 特 
效 。CSS 滤 镜 不 是 浏览 器 插件 ， 也 不 符合 CSS 标准 。 由 于 正 9.0 浏览 器 应 用 比较 广泛 ， 所 以 
这 里 对 其 进行 了 介绍 。 

从 Intermet Explorer 4.0 开始 ， 正 浏览 器 便 开始 支持 多 媒体 滤 镜 特效 ， 人 允许 使 用 简单 的 代 
码 就 能 对 文本 和 图 片 进行 处 理 ， 如 模糊 、 彩 色 投影 、 火 焰 效 果 、 图 片 倒置 、 色 彩 渐 变 。 风 吹 效 
果 和 光 曙 效果 等 。 如 果 把 滤 镜 和 渐变 结合 运用 到 网 页 脚本 语言 中 , 就 可 以 建立 一 个 动态 交互 的 
网 页 。 

CSS 的 滤 镜 属性 的 标识 符 是 filter， 语 法 格式 如 下 。 


filter:filtername(parameters) 
filtermame 是 滤 镜 名 称 ， 例 如 Alpha、blur、chroma 和 DropShadow 等 ，parameters 指定 了 


滤 镜 中 的 参数 ， 通 过 这 些 参数 才能 够 决定 滤 镜 的 显示 效果 。 表 18-1 列 出 常用 滤 镜 的 名 称 及 其 
效果 。 


表 18-1 CSS 滤 镜 
滤 镜 名 称 效果 
Alpha 设置 透明 度 
BlendTrans 实现 图 像 之 间 的 淡 入 和 淡出 的 效果 
Blur 建立 模糊 效果 
Chroma 设置 对 象 中 指定 的 颜色 为 透明 色 
DropShadow 建立 阴影 效果 
FlipH 将 元 素 水 平 翻 转 
FlipV 将 元 素 垂直 翻转 
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( 续 表 ) 
滤 镜 名 称 效果 
Glow 建立 外 发 光 效果 
Gray 灰 度 显 示 图 像 ， 即 显示 为 黑白 图 像 
Invert 图 像 反 相 ， 包 括 色 彩 、 饱 和 度 和 亮度 值 ， 类 似 底 片 效 果 
Light 设置 光源 效果 
Mask 建立 透明 遮 单 
RevealTrans 建立 切换 效果 
Shadow 建立 另 一 种 阴影 效果 
Wave 波纹 效果 
Xray 显现 图 片 的 轮廓 ， 类 似 于 久光 片 效 果 


18.2 CSS 的 基本 滤 镜 

CSS 滤 镜 可 以 分 为 基本 滤 镜 和 高 级 滤 镜 ， 基 本 滤 镜 是 直接 作用 于 HTML 对 象 上 便 能 立即 
生效 的 滤 镜 。 
18.2.1 通道 (Alpha) 滤 镜 

Alpha 滤 镜 能 实现 针对 图 片 文字 元 素 的 “透明 ”效果 ， 这 种 透明 效果 是 通过 “把 一 个 目标 
元 素 和 背景 混合 ”来 实现 的 ， 混 合 程度 可 以 由 用 户 指定 数值 来 控制 。 通 过 指定 坐标 ， 可 以 指定 
点 、 线 和 面 的 透明 度 。 如 果 将 Alpha 滤 镜 与 网 页 脚本 语言 结合 ， 并 适当 地 设置 其 参数 ， 就 能 使 
图 像 显 示 淡 入 淡出 的 效果 。 

Alpha 滤 镜 的 语法 格式 如 下 。 


{filter : Alpha ( enabled=bEnabled, style=iStyle, opacity=iOpacity, finishOpacity=iFinishOpacity, 
startx=iPercent, starty=iPercent. finishx=iPercent, finishy=iPercent )} 


各 参数 如 表 18-2 所 示 。 
表 18-2 Alpha 滤 镜 参数 及 说 明 


参数 说 明 

enabled 设置 滤 镜 是 否 激活 

style 设置 透明 渐变 的 样式 ， 也 就 是 渐变 显示 的 形状 ， 取 值 为 0-3。0 表示 无 渐变 ，1 表示 线形 
渐变 ，2 表示 圆 形 渐变 ，3 表示 算 形 渐变 

opacity 设置 透明 度 ， 值 范围 是 0~100。0 表示 完全 透明 ，100 表示 完全 不 透明 

finishOpacity 设置 结束 时 透明 度 ， 值 范围 也 是 0~100 

startx 设置 透明 渐变 开始 点 的 水 平 坐标 〈 即 x 坐标 ) 

Starty 设置 透明 渐变 开始 点 的 垂直 坐标 〈 即 y 坐标 ) 
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( 续 表 ) 
参数 说 明 
finishx 设置 透明 渐变 结束 点 的 水 平 坐 标 
finishy | 设置 透明 渐变 结束 点 的 垂直 坐标 


【 例 18.1】 《实例 文件 :chl18\18.1.html) 


<html> 
<head> 
<title>Alpha 滤 镜 </title> 
</head> 
<body> 
原始 图 <img src="baimd.jpg" style="width:200px:height:120px:"> 
style=0<img src="baimd.jpg" style="width:200px;height:120px:filter : Alpha(opacity=80,style=0)" > 
style=2<img src="baimd.jpg" style="width:200px;height:120px:filter : Alpha(opacity=60,style=2)" > 
style=3 <img src="baimd.jpg" style="width:200px:height:120px:filter : Alpha(opacity=40, style=3)" > 


在 正 9.0 中 浏览 效果 如 图 18-1 所 示 ， 可 以 看 到 页 面 中 显示 了 4 张 图 片 ， 其 透明 度 依次 减弱 。 
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18-1 ”实现 图 片 滤 镜 效果 
在 使 用 Alpha 滤 镜 时 要 注意 以 下 两 点 。 


@ 由 于 Alpha 滤 镜 使 当前 元 素 部 分 透明 ， 该 元 素 下 层 的 内 容 的 颜色 对 整个 效果 起 着 重要 
作用 ， 因 此 颜色 的 合理 搭配 相当 重要 。 
@ 透明 度 的 大 小 要 根据 具体 情况 仔细 调整 ， 取 一 个 最 佳 值 。 


Alpha 滤 镜 不 但 能 应 用 于 图 片 ， 还 可 以 应 用 于 文字 。 
【 例 18.2】 《实例 文件 : ch18\18.2.html) 


CSS 滤 镜 的 应 用 第 18 章 


<title>Alpha 滤 镜 </title> 
<style type="text/css"> 
<!-- 
pl 
color:yellow: 
font-weight:bolder:; 
font-size:25pt:; 
width:100% 
} 
a 
</style> 
</head> 
<body style="background-color:Black"> 
<div> 
<p>Alpha 滤 镜 </p> 
<p style="filter:alpha(opacity=80, style=1)"> 透 明 效 果 </p> 
<p style="filter:alpha(opacity=60, style=2)"> 透 明 效 果 </p> 
<p style="filter:alpha(opacity=40, style=3)"> 透 明 效 果 </p> 
</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-2 所 示 ， 可 以 看 到 页 面 中 显示 4 行文 字 ， 其 透明 度 依次 减弱 。 
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图 18-2 文字 透明 效果 


18.2.2 ”Blur 滤 镜 

Blur 滤 镜 实现 页 面 模糊 效果 ， 即 在 一 个 方向 上 的 运动 模糊 。 如 果 应 用 得 当 ， 就 可 以 产生 
高 速 移动 的 动感 效果 。 

Blur 滤 镜 的 语法 格式 如 下 。 


{filter : Blur ( enabled=bEnabled . add=iadd , direction=idirection , 
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strength=fstrength )} 
其 参数 如 表 18-3 所 示 。 
表 18-3 Blur 滤 镜 参数 及 说 明 


参数 说 明 
enabled 设置 滤 镜 是 否 激活 
add 指定 图 片 是 否 改变 成 模糊 效果 。 这 是 个 布尔 参数 , 有 效 值 为 True 或 False。True 是 默认 值 ， 


表示 应 用 模糊 效果 ，False 则 表示 不 应 用 

direction ”| 设 定 模糊 方向 。 模 糊 的 效果 是 按 顺 时 针 方 向 起 作用 的 ， 取 值 范围 为 0~360 度 ，45 度 为 一 
个 间隔 。 有 8 个 方向 值 : 0 表示 零度 ， 代 表 向 上 方向 。45 表示 右上 ，90 表示 向 右 ，135 
表示 右 下 ，180 表示 向 下 。225 表示 左下 ，270 表示 向 左 ，315 表示 左上 

strength 指定 模糊 半径 大 小 ， 单 位 是 像素 ， 默 认 值 为 5， 取 值 范围 为 自然 数 ， 该 取 值 决定 了 模糊 效 
果 的 延伸 范围 


【 例 18.3】 《实例 文件 :ch18\18.3.html) 


<html> 
<head> 
<title> 模 糊 Blur</title> 
<style> 
img{ 
height: 180px: 
} 
div.div2 { width:400px;filter:blur(add=true,direction=90,strength=50) } 
</style> 
</head> 
<body> 
原始 图 <img src="baihua.jpg"> 
add=true<img src="baihua.jpg" style="filter:Blur(add=true.direction=225,strength=20)"> 
add=false<img src="baihua.jpe" style="filter:Blur(add=false.direction=225.strength=20)"> 
<div class="div2"> 
<p style="font-size: 30pt: font-weight: bold: color:DarkBlue"> 
Blur 滤 镜 </p> 
</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-3 所 示 , 可 以 看 到 两 张 模糊 图 片 是 在 一 定 方向 上 发 生 的 模糊 。 
下 方 的 文字 也 发 生 了 模糊 ， 具 有 吹风 的 效果 。 


CSS 滤 镜 的 应 用 第 18 章 


BTir 滤 德 


图 18-3 ”模糊 效果 
18.2.3 ”Chroma 滤 镜 
Chroma 滤 镜 可 以 设置 HTML 对 象 中 指定 的 颜色 为 透明 色 。 其 语法 格式 如 下 。 
{filter : Chroma(enabled=bEnabled , color=sColor)} 


其 中 ，color 参数 设置 要 变 为 透明 色 的 颜色 。 
【 例 18.4】〔 实 例文 件 ，ch18\18.4.html) 


<html> 
<head> 

<title>Chroma 渡 镜 </title> 
<style> 
<!-- 
div {position:absolute:top:70:letf:40; filter:Chroma(color=blue)} 
Pp{font-size:30pt: font-weight:bold:; color:blue} 
-> 
</style> 
</head> 
<body> 

<p>Chroma 滤 镜 效果 </p> 

<div> 

<p>Chroma 滤 镜 效果 </p> 

</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-4 所 示 ， 可 以 看 到 第 二 行文 字 的 某 些 笔画 丢失 。 拖 动 鼠 标 选 
择 过 滤 颜 色 后 的 文字 ， 便 可 以 查看 过 滤 掉 颜色 的 文字 。 
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使 元 素 内 容 在 页 面 上 产生 投影 ， 从 而 实现 立体 的 效果 。 其 原理 就 是 创建 一 


万 ] EN 精通 HTML+CSS 月 -C X | 夺 chroma 污 演 
文件 中 帝 乔 (E) 。 豆 看 (V)。 收 草 闪 A)。 工 员 (] 。 帮 动 (H) 


Chroma 滤 镜 效 果 


| Gh 


图 18-4 ”Chroma 滤 镜 效果 


Chroma 渡 镜 一 般 应 用 于 文字 特效 ， 而 且 对 于 有 些 格式 的 图 片 也 是 不 适用 的 。 例 如 ，JPEG 
格式 的 图 片 是 一 种 已 经 减 色 和 压缩 处 理 的 图 片 ， 所 以 要 设置 其 中 某 种 颜色 为 透明 十 分 困难 。 


18.2.4 ”DropShadow 滤 镜 


阴影 效果 在 实际 的 文字 和 图 片 中 非常 实用 ， 正 9.0 通过 DropShadow 滤 镜 建立 阴影 效果 ， 


个 阴影 颜色 。 


DropShadow 滤 镜 语法 格式 如 下 。 


{filter : DropShadow ( enabled=bEnabled , color=sColor , offx=iOffsetx, offy=iOffsety, 
positive=bPositive ) } 
其 参数 如 表 18-4 所 示 。 
表 18-4 DropShadow 滤 镜 参数 及 说 明 


设置 滤 镜 是 否 激活 


指定 滤 镜 产生 的 阴影 颜色 


指定 阴影 水 平方 向 偏 移 量 ， 默 认 值 为 5px 


EE | 指定 阴影 垂直 方向 偏 移 量 ， 默 认 值 为 5px | 
指定 阴影 透明 程度 ， 为 布尔 值 。True (1) 表示 为 任何 的 非 透 明 像素 建立 可 见 的 阴 
影 ，False (0) 表示 为 透明 的 像素 部 分 建立 透明 效果 


Positive 


【 例 18.5】 《实例 文件 : chl8\18.5.html) 


<html> 
<head> 
<title>DropShadow 滤 镜 </title> 
</head> 
<body> 


个 偏 移 量 ,并 定义 一 
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<table width="90%" height="90%"> 
<tr> 
<td style="filter: DropShadow(color=gray.offx=10.,o0ffy=10,positive=1)"> 
<img src="9.jpg" > 
</td> 
</tr> 
<t> 
<td style="filter: DropShadow(color=gray.offx=5.offy=5.positive=1); 
font-size:20pt colorDarkBlue"> 
这 是 一 个 阴影 效果 
</td> 
</tr> 
</table> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 18-5 所 示 ， 可 以 看 到 图 片 产生 了 阴影 但 不 明显 。 下 方 文字 产 
生 的 阴影 效果 明显 。 


必要 EHTML:CSS DP- CX| EoropshadowisR x im 


文件 (月 ” 妨 强 (E) ”查看 (V) ”改过 闪 (A) “工具 (T) 。 碳 助 (H) 


图 18-5 ”阴影 效果 


18.2.5 ”FlipH 滤 镜 


在 CSS 中， 可 以 通过 Filp 滤 镜 实现 HIML 对 象 翻转 效果 ， 其 中 FlipH 滤 镜 用 于 水 平 翻转 
对 象 ， 即 将 元 素 对 象 沿 水 平方 向 进行 180” 翻 转 。FlipH 滤 镜 可 以 在 CSS 中 直接 使 用 ， 使 用 格 
式 如 下 。 


{Fliter: FlipH(enabled=bEnabled)} 


该 滤 镜 中 只 有 一 个 enabled 参数 ， 表 示 是 否 激活 滤 镜 。 
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【 例 18.6】 《实例 文件 :ch18\18.6.html) 


<html > 
<head> 
<title>FlipH 滤 镜 </title> 
<style> 
img{ 
height: 120px: 
width:200px: 
上 
</style> 
</head> 
<body> 
原 图 片 <img src="9.jpg"> 
图 片 水 平 翻 转 <img src="9.jpg" style="Filter:FlipHO"> 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-6 所 示 ， 可 以 看 到 图 片 进行 了 左右 方向 上 的 翻转 。 


司 EHTML+CSSAR PD GX) ripHa x | 
文件 (有 细 疆 (日 和 看 (V)。 收 基 交 (A) 工具 (如 虹 (H] 


图 18-6 图片 水 平 翻转 


18.2.6 ”Glow 滤 镜 

文字 或 物体 发 光 的 特性 往往 能 吸引 浏览 者 的 注意 ，Glow 滤 镜 可 以 使 对 象 的 边缘 产生 一 种 
柔和 的 边框 或 光 晤 ， 并 可 产生 如 火焰 一 样 的 效果 。 

语法 格式 如 下 。 

{filter : Glow ( enabled=bEnabled . color=sColor . strength=iDistance ) } 


其 中 ，color 设置 边缘 光 晕 颜色 ，strength 设置 晕 圈 范围 ， 值 范围 是 1~255， 值 越 大 效果 越 
强 。 


t 


【 例 18.7】《 实 例文 件 : ch18\18.7.html) 
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<html> 
<head> 
<title>filter glow</title> 
这 段 文字 不 带 有 光 晕 
<style> 
< 
-weny{ 
width:100%:; 
filter:Glow(color=#9966CC.,strength=10)} 
-> 
</style> 
</head> 
<body> 
<div class="weny"> 
<p style="font-family: 1 幼 圆 : font-size: 40pt font-weight: bolder: color: #003366"> 
这 段 文字 带 有 光量 
</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-7 所 示 ， 可 以 看 到 文字 带 有 光 尝 ,非常 漂亮 。 当 Glow 滤 镜 作 
用 于 文字 时 ， 每 个 文字 边缘 都 会 出 现 光 党， 效果 非常 强烈 。 而 对 于 图 片 ，Glow 滤 镜 只 在 其 边 
缘 加 上 光 尝 。 


|] Hi\Users\Administ 只 ~ © X | @ fiter glow 
文件 (F) ” 编 强 (E) 。 吾 看 (V) ”收藏 闪 (A) ”工具 (TD) 帮助 (H) 


这 段 文字 不 带 有 光 晕 


图 18-7 光学 效果 
18.2.7 ”Gray 滤 镜 


黑白 色 是 一 种 经 典 颜色 ， 使 用 Gray 滤 镜 能 够 轻松 地 将 彩色 图 片 变 为 黑白 图 片 。 
语法 格式 如 下 。 


{filter:Gray(enabled=bEnabled)} 


该 滤 镜 只 有 一 个 参数 enabled， 表 示 是 否 激活 ， 可 以 在 页 面 代码 中 直接 使 用 。 


精囊 HTML+C55 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


【 例 18.8】 实例 文件 :ch18\18.8.html) 


<html> 
<head> 
<title>Gray 滤 镜 </title> 
</head> 
<body> 
<img src="9.jpg” style="width: 50%:height:50%"” /> 原 图 
<img src="9.jpg” style="width: 50%:height:50%; filter: Gray0” /> 灰 度 图 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-8 所 示 ， 可 以 看 到 下 面 的 图 片 以 黑白 色 显示 。 


(总 司 ENEHIML+CSS PD © Xx | E ora 


文件 辣 昕 考 申 ， 醒 划 0V) 履 荐 夫 (A】 工具 TT 厅 动 H) 


图 18-8 ”以 黑白 色 显示 图 片 
18.2.8 Invert 滤 镜 


Invert 滤 镜 可 以 把 对 象 的 可 视 化 属性 全 部 翻转 ， 包 括 色彩 、 饱 和 度 和 亮度 值 ， 使 图 片 产生 
一 种 “底片 ”或 负片 的 效果 。 

语法 格式 如 下 。 

{filter:Invert(enabled=bEnabled)} 


该 滤 镜 只 有 一 个 enabled 参数 ， 用 来 设置 是 否 激 活 滤 镜 。 
【 例 18.9】“《 实 例文 件 : ch18\18.9.html) 


<html> 

<head> 

<title>Invert 滤 镜 </title> 

</head> 

<body> 

<img src="9.jpg" 户 原 图 

<img src="9.jpg” style="width:30%: filter: Invert0" > 反 相 图 
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</body> 
</html> 


在 焉 9.0 中 浏览 效果 如 图 18-9 所 示 ， 可 以 看 到 下 面 的 图 片 以 相片 底片 的 颜色 显示 。 


Ce emer -ex |S msn "es 


FH WE) EV A) RT tm) 


图 18-9 反 色 效果 


18.2.9 ”FlipV 滤 镜 


FlipH 滤 镜 用 来 实现 对 象 的 水 平 翻转 ， 而 FlipV 滤 镜 用 来 实现 对 象 的 垂直 翻转 ， 其 中 包括 
文字 和 图 像 。 语 法 格式 如 下 。 


{Fliter: FlipV(enabled=bEnabled)} 


该 滤 镜 只 有 一 个 enabled 参数 ， 表 示 是 否 激活 滤 镜 。 
【 例 18.10】 《实例 文件 : ch18\18.10.html) 


<html> 
<head> 
<title>FlipV 滤 镜 </title> 
</head> 
<body> 
<img src="9.jpg"> 原 图 片 
<img src="9.jpg" style="FilterFlipVO"> 图 片 垂直 翻转 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-10 所 示 ， 可 以 看 到 图 片 发 生 了 上 下 翻转 。 
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图 18-10 上 下 翻转 
18.2.10 ”Mask 滤 镜 


可 以 通过 mask 滤 镜 ， 为 网 页 中 的 元 素 对 象 做 出 一 个 矩形 谈 单 。 遮 单 ， 就 是 使 用 一 个 颜色 
图 层 将 包含 文字 或 图 像 等 对 象 的 区 域 遮 盖 ， 但 是 文字 或 图 像 部 分 却 以 背景 色 显示 出 来 。 
Mask 滤 镜 语法 格式 如 下 。 


{filter:Mask(enabled=bEnabled , color=sColor)} 


参数 color 用 来 设置 mask 滤 镜 作用 的 颜色 。 
【 例 18.11】〈 实 例文 件 : ch18\18.11.html) 


<html> 

<head> 

<title>Mask 遮 章 滤 镜 </title> 

<style> 

PT{ 
width:400: 
filter:mask(color:#FF9900): 
font-size:40pt: 
font-weight:bold: 
color:#00CC99: 

} 

</style> 

</head> 

<body> 

<p> 这 里 有 个 遮 罩 </p> 

</body> 

</html> 
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在 下 9.0 中 浏览 效果 如 图 18-11 所 示 ， 可 以 看 到 文字 上 面 有 一 个 遮 罩 , 文字 颜色 是 背景 颜 
色 。 


已] EA 福 二 HTML+CSS 用 - CX 名 Maslds 下 污 帝 
文件 日 。 疙 各 (E) 。 豆 看 (V) 。 必 辣 闪 (A) ”工具 人 才 动 (H) 


这 里 有 个 遮 辕 ”加 


18-11 “文字 遮 单 
18.2.11 Shadow 滤 镜 
可 以 通过 Shadow 滤 镜 来 给 对 象 添加 阴影 ， 其 实际 效果 看 起 来 好 像 是 对 象 离开 了 页 面 ， 并 
在 页 面 上 显示 出 该 对 象 阴影 。 阴 影 部 分 的 原理 是 建立 一 个 偏 移 量 ， 并 为 其 加 上 颜色 。 
Shadow 滤 镜 的 语法 格式 如 下 。 


{filter:Shadow(enabled=bEnabled , color=sColor . direction=iOffset, strength=iDistance)} 
其 参数 如 表 18-5 所 示 。 
表 18-5 Shadow 滤 镜 参数 及 说 明 


雍 | 衣 
设置 滤 镜 是 否 激活 
设置 投影 的 颜色 


设置 投影 的 方向 ， 分 别 有 8 种 取 值 ， 代 表 8 个 方向 : 取 值 为 0 表示 向 上 方向 ，45 为 右上 ，90 
为 右 ，135 为 右 下 ，180 为 下 方 ，225 为 左下 方 ，270 为 左 方 ，315 为 左上 方 。 


| strength 。 ”| 设置 投影 向 外 扩散 的 距离 


【 例 18.12】 《实例 文件 :chl8\18.12.html) 


<html> 
<head> 
<title> 阴 影 效 果 </title> 
<style> 
hlf 
color:#FF6600: 
width:400: 
filter:shadow(color=blue, offx=15. offy=22. positive=flase): 
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</style> 
</head> 
<body> 


<hl> 开 在 悬崖 上 的 野 百 合 </hl> 


</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-12 所 示 ， 可 以 看 到 文字 带 有 阴影 效果 。 


起 ] EN 精通 HTML+CSS 人 ”CG X 上司 阴影 效果 
文件 (月 ” 编 强 (E) ”本 看 (V) ”收藏 夫 (A) 工具 (T) 帮助 (H) 


肛 在 乱 峻 上 约 铸 再 兮 


18-12 ”Shadow 滤 镜 效果 


18.2.12 ”Wave 滤 镜 


Wave 滤 镜 
式 打 乱 。 
语法 格式 如 


{filter:Wave 


可 以 为 对 象 添加 竖 直 方向 上 的 波浪 效果 ， 也 可 以 用 来 把 对 象 按照 竖 直 的 波纹 样 
下 


(enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage ， 
phase=iPercentage , strength=iDistance) } 


各 参数 说 明 如 表 18-6 所 示 。 


表 18-6 ”Wave 滤 镜 参数 及 说 明 


参数 说 明 

enabled 设置 滤 镜 是 否 激活 

add 布尔 值 ， 表 示 是 否 在 原始 对 象 上 显示 效果 。True 表示 显示 ; False 表示 不 显示 

freq 设置 生成 波纹 的 频率 ， 也 就 是 设 定 在 对 象 上 产生 的 完整 的 波纹 的 条 数 

lightStrength 波纹 效果 的 光照 强度 ， 取 值 0~100 

phase 设置 正弦 波 开始 的 偏 移 量 ， 取 百分比 值 0-100， 默 认 值 为 0。25 就 是 360*25% 为 90”， 
50 则 为 180* 

strength 波纹 的 曲折 的 强度 


【 例 18.13】〔 实 例文 件 : ch18\18.13.html) 


<html> 


在 正 9.0 中 浏览 效果 如 图 18-13 所 示 ， 可 以 看 到 文字 带 有 波浪 效果 。 


图 18-13 “Wave 滤 镜 效果 
18.2.13 X-ray 滤 镜 
X-ray 中 文 含义 为 X 射线 ，X-ray 滤 镜 可 以 使 对 象 反 映 出 它 的 轮廓 ， 并 把 这 些 轮廓 的 颜色 


加 亮 ， 使 整体 看 起 来 有 一 种 久光 片 的 效果 。 
语法 格式 如 下 。 


该 滤 镜 只 有 一 个 enabled 参数 ， 用 于 确定 是 否 激活 滤 镜 。 
【 例 18.14】 (实例 文件 : ch18\18.14.html) 
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noe{ 
filter:xray: 
} 
</style> 
</head> 
<body> 
<img src="9.jpg" class="noe" /> 
<img src="9.jpe" > 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 18-14 所 示 ， 可 以 看 到 图 片 有 XX 光 效 果 。 


司 S 卫 本 HTML- CS 大 去 计 俩 渍 人 司 D = 必 X 


EC 


18-14 X-ray 滤 镜 效果 


18.3 CSS 的 高 级 滤 镜 
高 级 滤 镜 是 指 需要 配合 JavaScript 脚本 语言 ， 产 生变 换 效果 的 滤 镜 ， 包 含 BlendTrans、Re 
vealTrans 和 Light 等 。 
18.3.1 BlendTrans 滤 镜 


BlendTrans 滤 镜 是 一 种 高 级 滤 镜 ， 如 果 要 实现 滤 镜 效果 ， 需 要 结合 JavaScript。 该 滤 镜 可 
以 实现 HTML 对 象 的 渐 隐 渐 现 效果 。 

BlendTrans 滤 镜 语法 格式 如 下 。 

{ filter : BlendTrans ( enabled=bEnabled , duration=fDuration ) } 


上 述 代 码 中 ，enabled 表示 是 否 激 活 滤 镜 ; duration 表示 整个 转换 过 程 所 需要 的 时 间 ， 单 位 
【 例 18.15】 《实例 文件 : ch18\18.15.html) 
<html > 


"316。 
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<head> 
<title>BlendTrans 滤 镜 </title> 
<style type="text/css"> 
忆 本 
-blendtrans { filter:blendTrans(Duration=3)} 
-> 
</style> 
</head> 
<body onload="playImeO"> 
<img src="baimd.jpg" class="blendtrans" id="imgpic" style="width:300px:height:280px:" /> 
<script language="JavaScript"> 
<!-- 
/ 声明 数组 ， 数 组 元 素 的 个 数 就 是 图 片 的 个 数 ， 然 后 给 数组 元 素 赋值 ， 值 为 图 片 路 径 
ImgNum=new ImgArray(2): 
ImgNum[0]="baimd.jpe"; 
ImgNum[1]="baihua.jpg": 
/ 获取 数组 记录 数 
function ImgArray(len) 
8 
this.length=len: 
} 
Var i=]; 
// 转 换 过 程 
function playImgO{ 
(=—=1){ 
到 0。 
} 
else{ 
itt: 
} 
imgpic.filters[0].applyO: 
imgpic.src=ImgNum[i]: 
imgpic.filters[0]. playO: 
// 设置 演示 时 间 ， 这 里 是 以 毫秒 为 单位 的 ，4000 则 表示 延迟 4 秒 
/ 滤 镜 中 设置 的 转换 时 间 值 ， 这 样 当 转 换 结束 后 还 要 停留 一 段 时 间 
timeout=setTimeout(playImg0'.4000): 
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上 述 代 码 中 ， 对 HTML 元 素 img 应 用 了 BlendTrans 滤 镜 ， 然 后 使 用 Javascript 脚本 语言 
来 定义 转换 过 程 。 对 于 JavaScript 代码 ， 要 声明 用 来 存储 图 片 数 组 ， 并 指定 图 片 所 在 路 径 。 然 
后 ， 再 获取 数组 长 度 ， 用 于 在 转换 过 程 中 循环 读 取 图 片 数 量 。 接 着 定义 转换 过 程 playImg， 该 
过 程 实现 了 两 幅 图 片 之 间 的 淡 入 淡出 并 进行 转换 的 过 程 ，apply 方法 用 于 捕获 对 象 内 容 的 初始 
显示 ,为 转换 做 必要 的 准备 。timeout 指定 了 转换 的 延迟 时 间 ， 再 加 上 滤 镜 中 设置 的 转换 时 间 ， 
则 图 片 在 转换 之 间 将 停留 ， 以 方便 清楚 地 浏览 图 片 。 最 后 ， 在 主体 元 素 body 中 插入 onload 事 
件 ， 加 载 转换 过 程 。 

在 正 9.0 中 浏览 效果 如 图 18-15 所 示 , 可 以 看 到 一 张 图 片 慢 慢 消 失 , 另 一 张 图 片 慢 慢 出 现 ， 
两 张 图 片 不 断 循环 往复 ， 从 而 实现 渐变 效果 。 


& SE ES 靖 二 HTML+CSS D - © X | @ slendTransi# 
文件 (月 ”六 加 (E) 。 王 看 (V) 次 套 交 (A) 工具 (T) 帮助 (H) 


图 18-15 ”实现 渐 隐 渐 现 效果 
18.3.2 Light 滤 镜 
Light 滤 镜 是 一 个 高 级 滤 镜 ， 需 要 结合 JavaScript 使 用 。 该 滤 镜 用 来 产生 类 似 于 光照 灯 的 
效果 ， 并 可 调节 亮度 以 及 颜色 。 
语法 格式 如 下 。 
{filter:Light(enabled=bEnabled)} 
对 于 已 定义 的 Light 滤 镜 属性 ， 可 以 调用 它 的 方法 来 设置 或 改变 属性 。 这 些 方 法 如 表 18-7 
所 示 。 
表 18-7 ”Light 滤 镜 方法 及 说 明 


方法 说 明 
AddAmbIE 加 入 包围 的 光源 
AddCone 加 入 锥 形 光 源 
AddPoint 加 入 点 光源 


Changcolor 改变 光 的 颜色 
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方法 说 明 
Changstrength 改变 光源 的 强度 
Clear 清除 所 有 的 光源 
MoveLight 移动 光源 


【 例 18.16】 《实例 文件 :ch18\18.16.html) 


<html> 
<head> 
<title>light 滤 镜 效果 </title> 
</head> 
<body> 
<table> 
<tr> 
<td style="color:blue; font-weight:bolder"> 
随 鼠 标 变化 的 动态 光源 效果 
</td> 
</u> 
<tr> 
<td id="light" style="filter: lightO: width: 200px"> 
<img src="feng.jpe"> 
</td> 
</t> 
</table> 
<script language="Javascript"> 
<!-- 
var g_numlights=0; 
/ 调用 设置 光源 函数 
window.onload=setlights; 
/ 获得 鼠标 句柄 
light.onmousemove=mousehandler: 
/建立 光源 的 集合 
function setlightsO){ 
light.filters[0].clearO: 
lightfilters[0].addcone(0.0.5.100.100.255.255.0.60.30): 
} 
/ 捕捉 鼠标 的 位 置 来 移动 光线 焦点 
function mousehandlerO{ 
X=(Window.event.x-80):; 
y=(window.event.y-80):; 
light.filters[0].movelight(0,x,y.5.1): 
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} 


> 
</script> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 18-16 所 示 ， 可 以 看 到 一 幅 实现 光照 效果 的 图 片 ， 随 着 鼠标 的 移 
动 ， 灯 光照 射 的 方向 也 不 相同 ， 类 似 于 镭射 灯 的 效果 。 

实现 光照 效果 时 ，JavaScript 脚本 语言 起 主要 作用 。 首 先 要 创建 光源 并 指定 光源 位 置 。 
setlights 函数 中 filters[0] 表 示 设 置 的 光源 滤 镜 , 调用 clear 方法 表示 在 每 次 页 面 加 载 时 先 清除 所 
有 的 光源 ， 然 后 再 使 用 addcone 方法 创建 锥 形 光 源 。 如 果 需 要 在 图 片上 添加 多 束 光 源 ， 则 可 以 
重复 使 用 addcone 方法 , 但 注意 要 使 用 不 同 的 参数 ， 否 则 光源 处 于 同一 位 置 ， 就 无 法 产生 效果 
了 了 人。 函数 mousehandler 用 来 实现 光束 随 着 鼠标 移动 的 效果 。 


| evaHTML css D - 6 X| 局 iahtggxx 果 | 


工具 部 动 H) 


随 鼠 标 变化 的 动态 光源 效果 


图 18-16 ”Light 滤 镜 效果 
18.3.3 ”RevealTrans 滤 镜 
RevealTrans 滤 镜 能 够 实现 图 像 之 间 的 切换 效果 。 进 行 图 像 切 换 时 , 能 产生 32 种 动态 效果 ， 
例如 ， 溶 解 、 水 平 〈 垂 直 ) 展 幕 、 百 叶 窗 等 ， 可 以 随机 选取 其 中 一 种 效果 进行 切换 。 
RevealTrans 滤 镜 语法 格式 如 下 。 


filter : RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType ) 


其 中 ，enabled 表示 是 否 激活 滤 镜 ; duration 用 于 设置 切换 停留 时 间 ; transition 用 于 指定 转 
换 方式 ,， 即 指定 要 使 用 的 动态 效果 , 参数 取 值 是 0~23。transition 参数 值 及 效果 如 表 18-8 所 示 。 
表 18-8 RevealTrans 滤 镜 动态 效果 及 其 对 应 的 transition 参数 值 
动态 效果 参数 值 动态 效果 参数 值 
矩形 从 大 至 小 0 随机 溶解 12 
矩形 从 小 至 大 1 从 上 下 向 中 间 展 开 13 
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( 续 表 ) 

动态 效果 参数 值 动态 效果 参数 值 

形 从 大 至 小 六 从 中 间 向 上 下 展开 14 

形 从 小 至 大 3 从 两 边 向 中 间 展 开 15 
向 上 推 开 4 从 中 间 向 两 边 展开 16 
向 下 推 开 ] 从 右上 向 左下 展开 7 
向 右 推 开 6 从 右 下 向 左上 展开 18 
向 左 推 开 7 从 左上 向 右 下 展开 19 
垂直 形 百叶 窗 8 从 左下 向 右上 展开 20 
水 平 形 百叶 窗 9 随机 水 平 细 纹 21 
水 平 棋盘 10 随机 垂直 细 纹 22 
垂直 棋盘 11 随机 选取 一 种 效果 23 

但 是 ， 如 果 只 设置 了 transition 参数 来 实现 切换 过 程 的 话 ， 是 不 会 有 任何 效果 的 ， 因 为 动 

态 效果 的 实现 还 必须 依靠 脚本 语言 JavaScript 调用 相应 的 方法 。 
【 例 18.17】 《实例 文件 : chl8\18.17.html) 


<html > 
<head> 


<title> RevealTrans 滤 镜 </title> 


<style type="text/css"> 


Tevealtrans { filter:revealTrans(Transition=10,Duration=3)} 


</style> 
</head> 
<body onload="playImgO"> 


<img id="imgpic" class="revealtrans" src="9.jpg"/> 


<script language="JavaScript"> 


<!-- 


/ 声明 数组 ， 数 组 元 素 的 个 数 就 是 图 片 的 个 数 ， 然 后 给 数组 元 素 赋值 ， 值 为 图 片 路 径 
ImgNum=new ImgArray(2): 


ImgNum[0]="baimd.jpg": 
ImgNum[1]="baihua.jpg": 
/ 获取 数组 记录 数 
function ImgArray(len) 
{ 

this.length=len: 
} 
Var 二 1; 
/转换 过 程 
function playImgO{ 

站 (一 ]){ 
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imgpic.filters[0].applyO: 
imgpic.src=ImgNum[i]: 
imgpic.filters[0].playO: 
// 设置 演示 时 间 ， 这 里 是 以 毫秒 为 单位 的 ，4000 则 表示 延迟 4 秒 
/ 滤 镜 中 设置 的 转换 时 间 值 ， 这 样 当 转 换 结束 后 还 停留 一 段 时 间 
timeout=setTimeout('playImg()',4000): 
= 
</script> 
</body> 
</html> 


对 于 图 片 切换 ， 实 现代 码 与 BlendTrans 滤 镜 的 转换 代码 相似 ， 这 里 不 再 介绍 。 


在 正 9.0 中 浏览 效果 如 图 18-17 所 示 ， 可 以 看 到 图 片 以 百叶 窗 的 方式 打开 另 一 幅 图 片 ， 如 
此 循环 往复 。 


| 全 EAHTML+CSSF PD - © X | 大 ReveaTrans 汇 
文件 (月 ”名 匡 (E) ”至 看 (V) 收藏 交 ( 人 A) 工具 (T) 帮助 (H) 


图 18-17 图 片 切换 效果 


18.4 专家 解 惑 


1. 如 果 要 对 一 个 HTML 对 象 使 用 滤 镜 效果 ， 应 如 何 使 用 ? 
在 使 用 滤 镜 时 ， 若 使 用 多 个 滤 镜 ， 则 每 个 滤 镜 之 间 用 空格 分 隔 开 ; 一 个 滤 镜 中 的 若 


数 | 


速 号 分 隔 ; fiter 属性 和 其 他 样式 属性 同时 使 用 时 以 分 号 分 隔 。 


由 
全 
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2. 滤 镜 效果 是 IE 9.0 浏览 器 特有 的 CSS 特效 ， 那 么 在 Firefox 中 能 不 能 实现 呢 ? 

滤 镜 效果 虽然 是 正 9.0 浏览 器 特有 效果 ， 但 使 用 Firefox 浏览 器 的 属性 也 可 以 实现 相同 效 
果 。 例 如 ， 对 于 正 9.0 的 阴影 效果 ， 在 Firefox 网 页 设计 中 ， 可 以 先 在 文字 下 面 再 又 加 一 层 浅 
色 的 同样 的 文字 ， 然 后 做 2 个 像素 的 错位 ， 制 造 阴影 的 假象 。 


第 19 章 
< CSS 定 位 与 DIV 布 局 > 


在 网 页 设计 中 , 能 否 很 好 地 定位 网 页 中 的 每 个 元 素 ,是 网 页 整体 布局 的 关键 。 一 个 布局 混 
乱 、 元 素 定位 不 准 的 页 面 , 是 每 个 浏览 者 都 不 喜欢 的 。 因此 把 每 个 元 素 都 精确 定位 到 合理 位 置 ， 
才 是 构建 美观 大 方 页 面 的 前 提 。 


19.1 定位 方式 


在 CSS 中 ， 定 位 可 以 将 一 个 元 素 精确 地 放 在 页 面 上 用 户 所 指定 的 位 置 ， 而 布局 是 将 整个 
页 面 的 元 素 内 容 整洁 且 完 美 地 摆 放 。 定位 的 实现 是 布局 成 功 的 前 提 。 如 果 清晰 地 掌握 了 定位 原 
理 ， 那 么 就 能 够 创建 多 种 高 级 而 精确 的 布局 ， 并 会 让 网 页 的 实现 更 加 完美 。 
19.1.1 定位 属性 

在 网 页 设计 中 ， 定 位 (Positioning) 原理 简单 ， 就 是 用 户 精确 地 定义 HTML 元 素 框 所 在 页 
面 中 的 位 置 , 可 以 是 页 面 绝对 位 置 ， 也 可 以 是 对 于 其 上 级 元 素 、 另 一 个 元 素 或 浏览 器 窗口 的 相 
对 位 置 。 

可 以 认为 每 个 元 素 都 包含 在 一 个 矩形 框 内 , 称 为 元 素 框 。 而 元 素 内 容 与 元 素 框 共同 形成 了 
元 素 块 。 所 谓 定位 ， 就 是 定位 元 素 块 的 位 置 和 大 小 。 要 实现 CSS 定位 ， 需 要 依赖 定位 属性 才 
能 够 完成 。 

表 19-1 列 出 了 CSS 中 全 部 有 关 的 定位 属性 。 

表 19-1 定位 属性 及 其 含义 


定位 属性 含义 

position 定义 位 置 

left 指定 元 素 横向 距 左 部 距离 
right 指定 元 素 横向 距 右 部 距离 
top 指定 元 素 纵向 距 项 部 距离 
bottom 指定 元 素 纵向 距 底部 距离 
z-index 设置 元 素 的 层 倒 顺序 
width 设置 元 素 框 宽度 
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定位 属性 含义 
Height 设置 元 素 框 高 度 
overflow 内 容 溢出 控制 
clip 剪 切 


表 19-1 中 前 6 个 属性 是 实际 的 定位 属性 ， 后 面 的 4 个 有 关 属 性 是 用 来 设置 元 素 框 ， 或 对 
元 素 框 中 的 内 容 进行 控制 的 属性 。 其 中 ，position 属性 是 最 主要 的 定位 属性 。 它 既 可 以 定义 元 
素 框 的 绝对 位 置 ， 又 可 以 定义 相对 位 置 ， 而 left、right、top 和 bottom 只 有 在 position 属性 中 
使 用 才 会 发 挥 作用 。 
19.1.2 ”position 属性 


网 页 中 各 种 元 素 需要 有 自己 合理 的 位 置 ， 从 而 搭建 整个 页 面 的 结构 。 在 CSS 中 ， 可 以 通 
过 position 属性 ， 对 页 面 中 的 元 素 进行 定位 。 
其 语法 格式 如 下 所 示 : 


position : static | absolute | fixed | relative 


其 参数 含义 如 表 19-2 所 示 。 
元 素 定位 的 默认 值 ， 无 特殊 定位 ， 对 象 遵循 HTML 定位 规则 ， 不 能 通过 z-index 进 


表 19-2 position 属性 的 参数 及 说 明 


相对 定位 ， 对 象 不 可 重合 ， 可 以 通过 left、right、bottom 和 top 等 属性 在 正常 文档 中 


说 明 


偏 移 位 置 ， 可 以 通过 z-index 进行 层次 分 级 


生成 绝对 定位 的 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 。 元 素 的 位 
置 通过 left、top、right 以 及 bottom 属性 设置 


fixed fixed 生成 绝对 定位 的 元 素 , 相对 于 浏览 器 窗口 进行 定位 。 元素 的 位 置 通过 left、 top、 
right 以 及 bottom 属性 进行 设置 

1. 绝对 定位 (absolute) 

绝对 定位 是 参照 浏览 器 的 左上 角 ， 配 合 top、left、bottom 和 right 进行 定位 的 ， 如 果 没 有 
设置 上 述 4 个 值 ， 则 默认 以 父 级 的 坐标 原点 为 原始 点 。 绝 对 定位 可 以 通过 上 、 下 、 左 、 右 来 设 
置 元 素 ， 使 之 处 在 任何 一 个 位 置 。 

在 父 层 position 属性 为 默认 值 时 ， 上 、 下 、 左 、 右 的 坐标 原点 以 body 的 坐标 原点 为 起 始 
位 置 。 绝 对 定位 的 语法 格式 如 下 所 示 : 


position:absolute 


只 要 将 上 面 代码 加 入 到 样式 中 ， 使 用 样式 的 元 素 就 可 以 以 绝对 定位 的 方式 显示 了 。 
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【 例 19.1】〔 实 例文 件 ，ch19\19.1.html) 


<html> 
<head> 
<title> 定 位 属性 </title> 
</head> 
<body> 
<div style="background-color: Black: width:200px: height:200px"> 
<h2 style=" position:absolute: left:80px; top:80px: width:110px: height:SOpx: 
background-color:Red:"> 这 是 绝对 定位 </h2> 
</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-1 示 ， 可 以 看 到 红色 元 素 框 以 浏览 器 左上 角 为 原点 ， 坐 标 位 
置 为 《80px，80px) ， 宽 度 为 110 像素 ， 高 度 为 50 像素 。 


C0 | evBanrvtrcsP -cx| 
文件 日 ” 端 吉 (5E) 查看 (V) 效 豪 交 (A) 工具 (T) ”帮助 (H) 


图 19-1 绝对 定位 
优秀 的 页 面 设计 能 够 适用 于 各 种 屏幕 分 辨 率 , 并 且 要 能 够 保证 正常 的 显示 。 要 解决 这 个 问 
题 ， 在 定位 时 最 好 使 用 相对 定位 。 
2. 相对 定位 〈relative) 


如 果 对 一 个 元 素 进行 相对 定位 , 首先 它 将 出 现在 它 所 在 的 原始 位 置 上 。 然 后 通过 设置 垂直 
或 水 平 位 置 ， 让 这 个 元 素 “ 相 对 于 ” 它 的 原始 起 点 进行 移动 。 另 外 ， 进 行 相对 定位 时 ， 无 论 是 
否 进行 移动 ， 元 素 仍然 占据 原来 的 空间 。 因 此 ， 移 动 元 素 会 导致 它 覆 盖 其 他 框 。 

绝对 定位 与 相对 定位 的 区 别 在 于 : 绝对 定位 的 坐标 原点 为 上 级 元 素 的 原点 , 与 上 级 元 素 有 
关 ; 相对 定位 的 坐标 原点 为 本 身 偏 移 前 的 原点 ， 与 上 级 元 素 无 关 。 

相对 定位 的 语法 格式 如 下 所 示 : 


position:relative 


【 例 19.2】〔 实 例文 件 ，ch19\19.2.html) 
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<html> 

<head> 

<style type="text/css"> 

h2.pos_left 

{ 

position:relative; 

left:-20px 

} 

bh2.pos right 

position:relative; 

left:20px 

} 

</style> 

</head> 

<body> 

<h2> 这 是 位 于 正常 位 置 的 标题 </h2> 

<h2 class="pos_left"> 这 个 标题 相对 于 其 正常 位 置 向 左 移动 <h2> 
<h2 class="pos_right"> 这 个 标题 相对 于 其 正常 位 置 向 右 移动 </h2> 
<p> 相 对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进行 移动 。</p> 
<p> 样 式 "left:-20px” 从 元 素 的 原始 左 侧 位 置 减 去 20 像素 。</p> 
<p> 样 式 "left:20px” 向 元 素 的 原始 左 侧 位 置 增加 20 像素 。</p> 
</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 19-2 所 示 ， 可 以 看 到 页 面 显 中 示 了 3 个 标题 ， 最 上 面 标题 正常 
显示 ， 下 面 两 个 标题 分 别 以 正常 标题 为 原点 ， 分 别 向 左 和 向 右 移动 了 20 像素 。 


EAHIML+CSS PD- GX | BHT mL:cssm .x 
文件 (站 奖 强 (5) 过 看 (V) 。 次 二 关内。 工具 (T) 帮 翅 (H) 


这 是 位 于 正常 位 置 的 标题 
文 个 标题 相对 于 其 正常 位 置 向 左 移动 


这 个 标题 相对 于 其 正常 位 置 向 右 移动 
相对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进行 移动 。 
样式 “eft:-20px” 从 元 素 的 原始 左 例 位 置 诚 去 20 像素 。 
样式 “left:20px” 向 元 素 的 原始 左 例 位 置 增加 20 像素 。 


图 19-2 相对 定位 
3. 固定 定位 (fixed) 
固定 定位 和 绝对 定位 比较 相似 , 它 是 绝对 定位 的 一 种 特殊 形式 , 固定 定位 的 容器 不 会 随 着 
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滚动 条 的 拖 动 而 变换 位 置 。 在 视线 中 , 固定 定位 的 容器 位 置 是 不 会 改变 的 。 固定 定位 可 以 把 一 
些 特殊 效果 国定 在 浏览 器 的 视线 位 置 。 

固定 定位 的 参照 位 置 不 是 上 级 元 素 块 而 是 浏览 器 窗口 。 所 以 可 以 使 用 固定 定位 来 设 定 类 似 
传统 框架 样式 布局 ， 以 及 广告 框架 或 导航 框架 等 。 使 用 固定 定位 的 元 素 可 以 脱离 页 面 , 无 论 页 
面 如 何 滚 动 ， 始 终 处 在 页 面 的 同一 位 置 上 。 

固定 定位 语法 格式 如 下 所 示 。 


position:fixed 
【 例 19.3】〔 实 例文 件 : ch1l9\19.3.html) 


<html> 

<head> 

<title>CSS 固定 定位 </title> 
<style type="text/css">... 
| 

padding:0; 

margin:0; 

} 

#fixedLayer { 
width:100px: 
jline-height:S0px: 
background: #FC6: 
border: 1px solid #F90; 
position:fixed; 
left:10px; 

top:10px: 

} 

</style> 

</head> 

<body> 

<div id="fixedLayer"> 固 定 不 动 </div> 
<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 <Ip> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 
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<p> 我 动 了 </p> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 19-3 所 示 ， 可 以 看 到 拉动 滚动 条 时 ， 无 论 页 面 内 容 怎 么 变化 ， 
其 黄色 框 “ 固 定 不 动 ”始终 处 在 页 面 左 上 角 顶 部 。 


图 19-3 固定 定位 


19.1.3” 层 到 顺序 


对 HTML 元 素 进行 定位 时 ， 可 以 从 其 高 度 、 宽 度 和 深度 3 个 方面 入 手 ， 设 置 高 度 时 使 用 
height、 宽 度 使 用 width、 深 度 使 用 z-index。z-index 用 来 设置 元 素 层 合 的 次 序 ， 其 方法 是 为 每 
个 元 素 指定 一 个 数字 ， 数 字 较 大 的 元 素 将 全 加 在 数字 较 小 的 元 素 之 上 。 

z-index 语法 格式 如 下 所 示 : 


z-index : auto | number 


其 参数 值 auto 表示 遵循 父 对 象 的 定位 ，number 是 一 个 无 单位 的 整数 值 ， 可 以 为 负 值 。 如 
果 两 个 决定 定位 元 素 的 z-index 属性 具有 相同 的 number 值 ， 则 依据 该 元 素 在 HTML 文档 中 声 
明 的 顺序 进行 层 登 。 如 果 绝 对 定位 的 元 素 没有 指定 z-index 属性 ， 则 此 属性 的 number 值 为 正 
数 的 元 素 会 合 加 在 该 元 素 之 上 ， 而 number 值 为 负数 的 对 象 在 该 元 素 之 下 。 如 果 将 参数 设置 为 
null， 可 以 消除 此 属性 。 该 属性 只 作用 于 position 的 属性 值 为 relative 或 absolute 的 对 象 ， 不 能 
作用 在 窗口 组 件 上 。 

【 例 19.4】〔 实 例文 件 : ch19\19.4.html) 


<html> 
<head> 
<title>Z-index 使 用 </title> 
<style> 
#big { 
width:800px: 
height:220px: 
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<div id="Div3"><br> 
z-index 值 是 5 : </div> 
</div> 
</body> 
</html> 
在 正 9.0 中 浏览 效果 如 图 19-4 所 示 ， 可 以 看 到 网 页 中 显示 了 3 个 层 ，3 个 层 中 数值 大 小 
不 同 ， 并 从 大 到 小 分 别 在 其 他 层 上 显示 。 


文件 月 ”六 疆 (E) 查看 (V) 。 履 硬 交 I) 工具 (]) 大 一 (H) 


图 19-4 层 合 顺序 效果 显示 
19.1.4 ” 边 偏 移 属性 


边 偏 移 属性 包含 left、right、top 和 bottom 属性 。 所 谓 边 偏 移 属性 ， 就 是 用 来 描述 元 素 块 
与 包含 元 素 块 最 近 的 边线 之 间 的 偏 移 量 的 属性 。 其 中 left 描述 元 素 块 最 左边 与 包含 其 的 边框 最 
左边 的 边线 的 距离 ， 如 果 left 属性 值 为 正 ， 则 会 偏 右 移 ， 如 果 为 负 ， 则 会 使 它 更 向 左 移 ， 甚 至 
移出 边线 。 其 他 依次 类 推 。 

left、right、top 和 bottom 4 个 属性 取 值 非常 相似 ， 这 里 以 left 为 例 介 绍 。left 语法 格式 如 
下 所 示 : 


left : auto | length 


上 面 参数 值 中 auto 表示 系统 自动 取 值 , length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 
或 百分数 。 直 接 设 定数 值 用 来 设置 元 素 的 绝对 位 置 ,一 旦 该 位 置 确定 ， 那么 该 元 素 将 始终 处 于 
页 面 中 的 该 位 置 。 使 用 百分比 设置 元 素 位 置 ， 是 相对 于 其 上 级 元 素 的 位 置 而 设 定 的 。 如 果 取 值 
为 auto, 则 在 定位 中 允许 元 素 刚 好 有 显示 其 内 容 所 需 的 宽度 及 高 度 ， 而 不 必 再 指明 宽度 及 高 度 
的 值 。 

【 例 19.5】《〈 实 例文 件 : ch19\19.5.html) 


“331% 
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<body> 
<div style="background-color: Black: width:200px: height:200px"> 
<p style=" position:Telative: left:50%; right:0: top:50%; bottom:0: width:100px: height:100px: 
background-color:Red:">hello 
</p> 
</div> 
</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-5 所 示 ， 可 以 看 到 红色 正方 形 框 在 指定 位 置 显示 ， 其 底 侧 和 
右 侧 分 别 和 大 的 矩形 框 对 应 。 


图 19-5 边 偏 移 效果 显示 


19.2 浮动 定位 


除了 使 用 position 进行 定位 外 ， 还 可 以 使 用 float 定位 。Float (浮动 ) 定位 只 能 在 水 平方 
向 上 定位 ， 而 不 能 在 垂直 方向 上 定位 。float 属性 表示 浮动 属性 ， 它 用 来 改变 元 素 块 的 显示 方 
式 。 

float 语法 格式 如 下 所 示 : 


float : none | left |right 


属性 值 如 表 19-3 所 示 。 
表 19-3 float 属性 值 及 说 明 


属性 值 说 明 
none 元 素 不 浮动 
left 浮动 在 左面 


right 浮动 在 右面 


实际 上 ， 使 用 float 可 以 实现 两 列 布局 ， 也 就 是 让 一 个 元 素 在 左面 浮动 ， 一 个 元 素 在 右面 
浮动 ， 并 能 控制 好 这 两 个 元 素 的 宽度 。 


【 例 19.6】 “实例 文件 : chl9\19.6.html) 
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</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 19-6 所 示 ， 可 以 看 到 显示 了 一 个 大 矩形 框 ， 大 秆 形 框 中 存在 两 
个 小 的 矩形 框 ， 并 列 显示 。 


19-6 ftoat 浮动 布局 
使 用 float 属性 不 但 可 以 改变 元 素 的 显示 位 置 ， 同 时 会 对 相 邻 内 容 造 成 影响 。 定 义 了 float 
属性 的 元 素 会 覆盖 其 他 元 素 , 而 被 覆盖 的 区 域 将 处 于 不 可 见 状态 。 使 用 该 属性 能 够 实现 内 容 环 
绕 图 片 的 效果 。 
如 果 不 想 让 float 下 面 的 其 他 元 素 浮动 环绕 在 该 元 素 周围 ， 可 以 使 用 CSS 的 clear 属性 ， 
clear 语法 格式 如 下 所 示 : 
clear : none | left |right | both 


其 中 ，none 表示 允许 两 边 都 可 以 有 浮动 对 象 ，both 表示 不 允许 有 浮动 对 象 ，left 表示 不 
允许 左边 有 浮动 对 象 ，right 表示 不 允许 右边 有 浮动 对 象 。 使 用 float 以 后 ， 在 必要 的 时 候 就 需 
要 通过 clear 语句 清除 float 带 来 的 影响 ， 以 免 出 现 “ 其 他 DIV 跟着 浮动 ”的 效果 。 


19.3 溢出 定位 


如 果 元 素 框 被 指定 了 大 小 ,而 元 素 的 内 容 不 适合 该 大 小 , 例如 元 素 内 容 较 多 , 元 素 框 显示 
不 下 ， 此 时 则 可 以 使 用 溢出 属性 overflow 来 控制 这 种 情况 。 
overflow 语法 格式 如 下 所 示 : 


overflow : visible | auto | hidden | scroll 


各 属性 值 及 其 说 明 如 表 19-4 所 示 。 
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表 19-4 overflow 属性 值 及 说 明 


属性 什 说 明 
visible 若 内 容 溢出 ， 则 溢出 内 容 可 见 

hidden | 车 内 容 溢出 ， 则 溢出 内 容 隐藏 

scroll | 保持 元 素 框 大 小 ， 在 框 内 应 用 滚动 条 以 显示 内 容 
auto | 等 同 于 scrou， 它 表示 在 需要 时 应 用 滚动 条 


overflow 属性 适用 于 以 下 情况 。 


元 素 框 宽 于 上 级 元 素 内 容 区 ， 换 行 不 被 允许 。 
元 素 框 宽 于 上 级 元 素 区 域 宽度 。 

元 素 框 高 于 上 级 元 素 区 域 高 度 。 

元 素 定义 了 绝对 定位 。 


【 例 19.7】〔 实 例文 件 ，ch19\19.7.html) 


<html> 
<head> 


<title>overflow 属性 </title> 
<style> 
div{ 
position:absolute; 
color:#445633; 
height:200px: 
width: 30%:; 
float:left: 
margin: Opx: 
padding: 0px: 
border-right: 2px dotted #cceccc: 
border-bottom: 2px solid #cccccc: 
padding-right: 10px: 
overflow:auto: 
} 
</style> 


</head> 
<body> 


<div> 
<p> 综 艺 节 目 排名 </p><p>1 非诚勿扰 </p><p>2 康熙 来 <p> 
<p>3 ”快乐 大 本 营 </p><p>4 ”娱乐 大 风暴 </p><p>5 天 天 向 上 </p><p>6 爱情 连连 看 </p> 
<p>7 销 销 三 人 行 </p><p>8 我 们 约会 吧 </p> 

</div> 
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</body> 
</html> 


在 正 9.0 中 浏览 效果 如 图 19-7 所 示 ， 可 以 看 到 在 一 个 元 素 框 中 显示 了 多 个 元 素 ， 拉 动 显 
示 的 滚动 条 可 以 查看 全 部 元 素 。 如 果 overflow 设置 的 值 为 hidden， 则 会 隐藏 多 余 元 素 。 


eej 站 EA 枉 HTML+CSS D - CX| 车 overow 到 性 x 


文件 中 ” 靖 得 (日 。 查看 (V) 收 荐 交 (A)】 工具 (T 帮 动 (H)} 


综艺 节目 排名 
1 非诚勿扰 
2 康熙 来 

3 快乐 大 本 营 
4 娱乐 大 风暴 


5 天 天 向 上 


图 19-7 ”溢出 定位 


19.4 隐藏 定位 


visibility 属性 指定 是 否 显示 一 个 元 素 生 成 的 元 素 框 。 这 意味 着 元 素 仍 占据 其 本 来 的 空间 
不 过 可 以 完全 不 可 见 ， 即 设 定 元 素 的 可 见 性 。 
visibility 语法 格式 如 下 所 示 : 
visibility : inherit | visible | collapse | hidden 
其 属性 值 如 表 19-5 所 示 。 
表 19-5 visibility 属性 值 及 说 明 


| 属性 值 。 | 党 明 


collapse 主要 用 来 隐藏 表格 的 行 或 列 。 隐 藏 的 行 或 列 能 够 被 其 他 内 容 使 用 。 对 于 
表格 外 的 其 他 对 象 ， 其 作用 等 同 于 hidden 


如 果 元 素 visibility 属性 的 属性 值 设 定 为 hidden， 表 现 为 元 素 隐藏 ， 即 不 可 见 。 但 是 ， 元 
素 不 可 见 并 不 等 同 于 元 素 不 存在 ， 它 仍旧 会 占有 部 分 页 面 位 置 ， 影 响 页 面 的 布局 。 换 句 话 说 ， 
元 素 仍然 处 于 页 面 中 自己 的 位 置 上 ， 只 是 无 法 看 到 它 而 已 。 

【 例 19.8】 《实例 文件 :ch19\19.8.html) 


<html> 
<head> 
<title>float 属性 </title> 
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<style type="text/css"> 
-div{ 
padding:Spx: 
Pic{ 
float:left: 
padding:20px: 
Visibility:visible: 
hl{ 
font-weight:bold: 
text-align:center 
</style> 
</head> 
<body> 
<h1> 插 花 </h1> 
<div class="div"> 
<div class="pic"> 
<img src="08.jpe"” width=150px height=100px /> 
</div> 
<p> 插 花 就 是 把 花 插 在 瓶 、 盘 、 盆 等 容器 里 ， 而 不 是 栽 在 这 些 容器 中 。 所 插 的 花 材 ， 或 枝 、 或 花 、 
或 叶 ， 均 不 带 根 ， 只 是 植物 体 上 的 一 部 分 ， 并 且 不 是 随便 乱 插 的 ， 而 是 根据 一 定 的 构思 来 选材 ， 遵 循 一 定 的 
创作 法 则 ， 插 成 一 个 优美 的 形体 〈 造 型 ) ， 借 此 表达 一 种 主题 ， 传 递 一 种 感情 和 情趣 ， 使 人 看 后 赏心悦目 ， 
获得 精神 上 的 美感 和 愉快 。 
</p> 
<p> 
在 我 国 插花 的 历史 源远流长 ， 发 展 至 今 已 为 人 们 日 常生 活 所 不 可 缺少 。 一 件 成 功 的 插花 作品 ， 并 
不 是 一 定 要 选用 名 贵 的 花 材 、 高 价 的 花 器 。 一 般 看 来 并 不 起 眼 的 绿叶 ， 一 个 花蕾 ， 甚 至 路 边 的 野花 野草 ， 常 
见 的 水 果 、 蔬 菜 ， 都 能 插 出 一 件 令 人 赏心悦目 的 优秀 作品 来 。 使 观赏 者 在 心灵 上 产 失 共鸣 的 是 创作 者 唯一 的 
目的 ， 如 果 不 能 产生 共鸣 那么 这 件 作 品 也 就 失 击 了 观赏 价值 。 具 体 地 说 ， 即 插花 作品 在 视觉 上 首先 要 立即 引 
起 一 种 感 观 和 情感 上 的 自然 反应 ， 如 果 未 能 立刻 产生 反应 ， 那 么 摆 在 眼前 的 这 些 花 材 将 无 法 吸引 观 者 的 目光 。 
在 插花 作品 中 引起 观赏 者 情感 产生 反应 的 要 素 有 三 点 : 一 是 创意 (或 称 立意 )、 指 的 是 表达 什么 主题 ， 应 选 什 
么 花 材 ; 二 是 构思 (或 称 构图 ), 指 的 是 这 些 花 材 怎样 巧妙 配置 造型 ,在 作品 中 充分 展现 出 各 自 的 美 : 三 是 插 器 ， 
指 的 是 与 创意 相配 合 的 插花 器 髓 。 三 者 有 机 配合 ， 作 品 便 会 给 人 以 美的 享受 。 
</p> 
</div> 
</body> 
</html> 
在 正 9.0 中 浏览 效果 如 图 19-8 所 示 ， 可 以 看 到 图 片 在 页 面 左边 显示 ， 并 被 文本 信息 所 环 
绕 。 此 时 visibility 属性 为 visible， 表 示 图 片 可 见 。 
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7 机 
全 人 EEC 而 证 
文件 从 需 汤 日 。” 到 所 (VY) 。 收 三 夫 人 A) 工 匡 仆 天 动 (H) 


插花 


村 
) ， 人 此 表达 
目 ， 获 得 精神 


不 可 缺少 ， 一 件 成 功 的 插花 作 
不 个 从 二 


图 19-8 ”隐藏 定位 显示 


19.5” 块 和 行内 元 素 


在 网 页 设计 中 ， 根 据 需 要 可 以 将 段落 设置 成 一 个 块 显示 ， 并 带 有 边框 ， 即 类 似 于 DIV 层 
的 效果 。 也 可 以 把 多 个 HTML 元 素 放 在 同一 行 显示 。 本 节 将 介绍 这 两 种 实现 方式 。 


19.5.1 块 元 素 


在 CSS 中 可 以 通过 display 属性 ， 控 制 元 素 显示 方式 。 
display 语法 格式 如 下 所 示 : 


display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | 
table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group 


属性 值 及 说 明 如 表 19-6 所 示 。 


表 19-6 display 属性 值 及 说 明 


以 块 元 素 方式 显示 
以 内 联 元 素 方式 显示 
元 素 隐藏 
以 列表 方式 显示 
CSS2 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 联 对 象 

CSS2 指定 内 容 在 容器 对 象 之 前 或 之 后 。 要 使 用 此 参数 ， 对 象 必 须 和 :after 及 :before 伪 元 
素 一 起 使 用 

CSS2 将 表格 显示 为 无 前 后 换行 的 内 联 对 象 或 内 联 容 器 

CSS1 将 块 对 象 指 定 为 列表 项 目 。 并 可 以 添加 可 选项 目标 志 

CSS2 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 联 对 象 


list-item 


compact 


marker 


inline-table 


list-item 


run-in 
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( 续 表 ) 
属性 值 说 明 


table CSS2 将 对 象 作为 块 元 素 级 的 表格 显示 


table-caption CSS2 将 对 象 作为 表格 标题 显示 
table-cell CSS2 将 对 象 作为 表格 单元 格 显 示 


table-column CSS2 将 对 象 作为 表格 列 显示 


table-column-group | CSS2 将 对 象 作为 表格 列 组 显示 


CSS2 将 对 象 作为 表格 标题 组 显示 


table-footer-group ”| CSS2 将 对 象 作 为 表格 脚注 组 显示 


table-row CSS2 将 对 象 作 为 表格 行 显示 


table-row-group CSS2 将 对 象 作 为 表格 行 组 显示 


display 属性 的 默认 值 为 block， 即 元 素 的 默认 显示 方式 是 以 块 元 素 方式 显示 。 常 用 的 段落 
p、 标 题 hl 、 表 单 form、 列 表 ul 和 列表 选项 i 都 可 以 定义 成 块 元 素 。 块 元 素 的 行 高 、 顶 部 和 
底部 都 是 可 控制 的 。 如 果 不 设置 宽度 的 话 , 块 元 素 会 默认 为 整个 容器 的 100%， 如 果 设 定 了 值 ， 
则 显示 大 小 由 值 决定 。 

【 例 19.9】《〈 实 例文 件 ， ch19\19.9.html) 


<title> 块 元 素 </title> 
<style> 

.big{ 
Width:800px: 
height:105px: 
background-image:url(07.jpg): 
} 

a{ 
font-size:12px; 
display:block: 
width:100px: 
height:20px: 
line-height:20px: 
backeround-color:#F4FAFB: 
text-align:center; 
text-decoration:none; 
border-bottom: 1px dotted #6666FF: 
color:black: 

a:hover{ 
font-size:13px: 
display:block: 
width:100px; 
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height:20px: 
line-height:20px: 
text-align:center; 
text-decoration:none; 
color:green:; 
3 
</style> 
</head> 
<body> 
<div class="big"> 
i 
<a href="#"> 管 理应 用 </a><a hre 伍 "#"> 财 务 管理 </a><a hre 伍 "#"> 在 线 管理 </a> 
<a hre 伍 "#"> 客 户 关系 管理 </a><a hre 伍 "#"> 一 体 化 管理 </a> 
</p> 
</div> 
</body> 


在 正 9.0 中 浏览 效果 如 图 19-9 所 示 ， 可 以 看 到 左边 显示 了 一 个 导航 栏 ， 右 边 显示 了 一 个 
图 片 。 其 导航 栏 就 以 块 元 素 形式 显示 。 


KIO wm -oxlezr “人 攻 


图 19-9 块 元 素 显示 
19.5.2 行内 元 素 


当 display 的 值 被 设 定 为 inline 时 ， 可 以 把 元 素 设置 为 行内 元 素 ， 并 在 浏览 器 中 同一 行 显 
示 。inline 元 素 决 定 和 其 他 HTML 元 素 在 同一 行 上 ， 其 行 高 、 顶 部 和 底部 边 距 可 以 改变 ， 而 宽 
度 是 不 可 以 改变 的 。 

【 例 19.10】《 实 例文 件 : ch19\19.10.html) 


<html> 
<head> 
<title> 行 内 元 素 </title> 
<style type="text/css"> 
-hang { 
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<a href="#" class="hang"> 这 是 a 标签 </a> 
<span class="hang"> 这 是 span 标签 </span> 

<strong class="hang"> 这 是 strong 标签 </strong> 

<img class="hang" src=6.jpg/> 

</div> 

</body> 

</html> 


在 正 9.0 中 浏览 效果 如 图 19-10 所 示 ， 可 以 看 到 页 面 中 显示 的 4 个 HTML 元 素 ， 都 在 同 
一 行 显示 ， 包 括 超级 链接 、 文 本 信息 和 图 片 。 


OS 司 ] ENHTML+CSS -CX 


文件 (F) 帝 纠 (E) ”可 看 (V) ”站 三 闪闪 工具 (D) 。 帮 动 (H) 


这 是 a 标签 这 是 span 标 签 这 是 strong 标 签 各 


图 19-10 行内 显示 


19.6 综合 实例 一 一 左右 布局 的 新 闻 页 面 


一 个 美观 大 方 的 页 面 , 必然 是 一 个 布局 合理 的 页 面 。 左 右 布局 是 网 页 中 比较 常见 的 一 种 方 
式 , 即 根据 信息 种 类 不 同 , 将 信息 分 别 在 当前 页 面 左右 侧 显示 。 本 实例 将 利用 前 面 学 习 的 知识 ， 
创建 一 个 左右 布局 的 新 闻 页 面 。 

具体 步骤 如 下 所 示 。 


0 分 析 需 求 ， 


首先 需要 将 整个 页 面 分 为 左右 两 个 模块 ， 左 模块 放置 一 类 信息 , 右 模块 放置 一 类 信息 。 可 
以 设 定 其 宽度 和 高 度 。 实 例 完成 后 ， 效 果 如 图 19-11 所 示 。 
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图 19-11 左右 显示 信息 
to3 创建 HTML 页 面 ， 实 现 基本 列表 。 


创建 HTML 页 面 ， 同 时 用 DIV 在 页 面 中 划分 左边 DIV 层 和 右边 DIV 层 两 个 区 域 ， 
将 信息 放 入 到 相应 的 DIV 层 中 ， 注 意 DIV 层 内 引用 CSS 样式 名 称 。 


<html> 
<head> 
<title> 布 局 </title> 
</head> 
<body> 
<centeI> 
<div class="big"> 

<p class=pp> 女 人 </p> 

<div class="left"> 

<hl> 女 人 </hl> 

。 六 类 食物 能 有 效 对 抗 紫外 线 11:15 </p> 
* 打造 夏美 人 受 OL 追捧 的 清爽 发 型 10:05 </p> 
“美丽 帮 帮 忙 : 别 让 大 油 脸 吓 跑 男 人 09:47 </p> 
* 简约 雪 纺 清凉 衫 百 元 搭 出 欧美 范 儿 14:51 </p> 
* 花边 连衣裙 超 勾 人 7 月 穿 搭 出 新 意 11:04 </p> 


G0 


</ 
<div class="right"> 
<h1> 健 康 </h1> 
“女性 养生 : 让 女人 老 得 快 的 10 个 原因 19:18 </p> 
* 养生 盘点 : 喝 豆 浆 的 九 大 好 处 和 七 大 禁忌 09:14</p> 
*。 养生 警 惕 : 14 个 护肤 心理 “ 错 ” 觉 19:57</p> 
* 柿子 番茄 骨 汤 8 种 营养 师 最 爱 的 食物 15:16</p> 
* 夏季 养生 指南 : “夫妻 菜 ” 宜 常 吃 10:48 </p> 
，10 条 食疗 养生 方法 ， 居 家 宅 人 的 养生 经 13:54 </p> 


晤 和 


A 


</di 


3$ 


A 
Y 


并 且 


在 下 9.0 中 浏览 效果 如 图 19-12 所 示 ， 可 以 看 到 页 面 中 显示 了 两 个 模块 ， 分 别 是 “女人 ” 
和 “健康 ”， 两 者 上 下 排列 。 
四 3 添加 CSS 代码 ， 修 人 饰 整体 样式 和 DIV 层 。 


在 下 9.0 中 浏览 效果 如 图 19-13 所 示 ， 可 以 看 到 页 面 比较 原来 字体 变 小 ， 并 且 大 的 DIV 


显示 了 边框。 


让 


性 关 生 ， 让 女人 者 和 人 的 10 人 和 国 1918 
- 关 生 寺 习 ;14 个 护 了 理 “ 术 ”党 1957 
并 凡生 委 的 条 15-16 


池 生 音 点 ， 虽 豆 轩 的 九 大 好 处 和 寸 大 禁忌 094 
状 生 里 悍 ，14 个 把 寺 心理 “ 卉 ” 觉 1947 
" 情 子 着 范 角 济 四 苦 关 是 且 美的 训 物 1516 
“天 0 
10 条 食 反 襟 生 方法 ， 忆 案 忆 人 的 状 生 经 1334 


图 19-12 上 下 排列 图 19-13 ”修饰 整体 样式 


0 添加 CSS 代码 ， 设 置 两 个 层 左右 并 列 显示 。 


"343。 


在 正 9.0 中 浏览 效果 如 图 19-14 所 示 , 可 以 看 到 页 面 中 文本 信息 左右 并 列 显示 , 但 字体 没 
有 发 生变 化 。 


图 19-14 设置 左右 悬浮 
05) 添加 CSS 代码 ， 定 义 文本 样式 。 
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position:relative; 

left:-3px; 

top:-3pX: 

font-size:16px: 

text-decoration:underline: 
} 


在 正 9.0 中 浏览 效果 如 图 19-15 所 示 , 可 以 看 到 页 面 中 文本 信息 左右 并 列 显示 ， 其 字体 颜 
色 为 蓝 色 ， 行 高 为 18 像素 。 


-这 和 彰 据 人 月 恒 撕 出 果 宫 134 


图 19-15 文本 修饰 样式 


19.7 ”专家 解 惑 


1. 块 元 素 和 行内 元 素 的 概念 是 什么 ， 有 了 哪些 特点 ? 


块 级 元 素 和 行内 元 素 是 布局 的 需要 的 最 基本 的 两 种 元 素 , 常见 的 块 级 元 素 有 div、p、 form、 
ul、ol、 Li 等， 常见 行内 元 素 有 span、strong、em 等 。 

块 级 元 素 会 独占 一 行 ， 对 应 于 display-block， 可 以 设置 width、height、margin、padding 属 
性 ; 行内 元 素 不 独占 一 行 ， 对 应 于 display:inline， 相 邻 行内 元 素 会 排列 在 同一 行 ， 直 到 排 不 下 
才 换 行 ， 设 置 width、height 属性 无 效 ， 而 margin 和 padding 属性 只 对 设置 水 平方 向 的 right 和 
left 有 效 。 可 以 通过 修改 display 属性 来 切换 块 级 元 素 和 行内 元 素 。 

display:inline-block 是 行内 的 块 级 元 素 ， 拥 有 块 级 元 素 的 特点 ， 可 以 设置 width、height、 
margin、padding 值 ， 但 又 可 以 和 其 他 行内 元 素 排 在 同一 行 。 


2. 当 设 置 多 个 div 并 列 时 ， 为 什么 有 时 会 撑 破 整个 布局 ? 
很 多 时 候 ， 尤 其 是 容器 内 有 平行 布局 ， 例 如 两 、 三 个 float 的 div 时 ， 宽 度 很 容易 出 现 问 


题 。 在 正中， 外 层 的 宽度 会 被 内 层 更 宽 的 div 挤 破 。 一 定 要 用 Photoshop 或 者 Firework 量 取 
像素 级 的 精度 。 


第 20 章 
4CSS 与 JavaScripft 的 搭配 应 用 ， 


网 页 的 吸引 人 之 处 ， 莫 过 于 具有 动态 效果 ， 利 用 CSS 伪 类 元 素 可 以 轻易 实现 超级 链接 的 
动态 效果 。 不 过 利用 CSS 能 实现 的 动态 效果 非常 有 限 。 在 网 页 设计 中 ， 还 可 以 将 CSS 与 Java 
Script 结合 从 而 创建 出 具有 动态 效果 的 页 面 。 


20.1 JavaScript 概述 


JavaScript 是 一 种 面向 对 象 、 结 构 化 、 多 用 途 的 语言 ， 它 支持 Web 应 用 程序 的 客户 端 和 服 
务 器 方面 构件 的 开发 。 在 客户 端 利 用 JavaScript 脚本 语言 ， 可 以 设计 出 多 种 网 页 特效 ， 从 而 增 
加 网 页 浏览 量 。 


20.1.1 JavaScript 概念 


JavaScript 是 一 种 脚本 编写 语言 ， 它 采用 小 程序 段 的 方式 实现 编程 ， 像 其 他 脚本 语言 一 样 ， 
JavaScript 同样 也 是 一 种 解释 性 语言 ， 它 提供 了 一 个 简易 的 开发 过 程 。JavaScript 是 一 种 基于 对 
象 的 语言 ,同时 也 可 以 把 它 看 作 是 一 种 面向 对 象 语言 。 这 意味 着 它 具 有 定义 和 使 用 对 象 的 能 力 。 
因此 ， 许 多 功能 可 以 由 脚本 环境 中 对 象 的 方法 与 脚本 之 间 进 行 相互 协作 来 实现 。 

JavaScript 是 动态 的 ， 它 可 以 直接 对 用 户 或 客户 输入 的 数据 做 出 及 时 响应 ， 无 需 经 过 Web 
服务 程序 。 它 对 用 户 请 求 的 响应 采用 以 事件 驱动 的 方式 进行 。 在 主页 中 执行 某 种 操作 时 所 产生 
的 动作 ， 就 称 为 “事件 ” 例如 按 下 鼠标 、 移 动 窗口 、 选 择 菜单 等 都 可 以 视 为 事件 。 当 “事件 ” 
被 触发 时 ， 可 能 会 引起 相应 的 事件 响应 处 理 。 

JavaScript 具有 下 面 几 个 特点 。 


@ 一 种 描述 语言 ， 通 过 浏览 器 可 以 直接 执行 。 

@ 必须 编写 在 HTML 文件 中 ， 直 接 查 看 网 页 的 源码 ， 就 可 以 看 到 JavaScript 程序 ， 所 以 
没有 保护 ， 任 何人 都 可 以 通过 HTML 文件 复制 程序 。 

@ 结构 较为 自由 松散 ， 例 如 程序 中 使 用 变量 前 ， 并 不 需要 明确 的 定义 ， 也 不 区 分 大 
小 写 。 

@ 不 具有 读 写 文件 及 网 络 控制 等 功能 。 
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20.1.2 ”JavaScript 的 引用 


在 HTML 文档 中 使 用 JavaScript 有 两 种 方式 , 一 种 是 使 用 <scrip 亿 标记 将 将 语句 嵌入 文档 ， 


另 一 种 是 将 JavaScript 做 成 独立 的 文件 ， 引 入 到 HTML 文档 中 。 


1. 嵌入 JavaScript 代码 
如 果 在 HTML 文件 中 赔 入 JavaScript 代码 , 需要 在 <head> 标 记 中 间 嵌 入 一 个 <scrip 标 记 ， 


如 下 所 示 。 


<script language=“JavaScript”> 脚 本 程序 </script> 


此 代码 语句 表示 在 HTML 文档 里 嵌入 了 一 段 脚 本 程序 ， 脚 本 语言 为 JavaScript。 中 间 放 置 


的 是 脚本 程序 。 


【 例 20.1】 “实例 文件 :ch20\20.1.html) 


<html> 
<head> 
<script language = "JavaScript"> 
document.write(" 欢 迎 来 到 JavaScript 动态 世界 "); 
</script> 
</head> 
<body> 
<P> 学 习 JavaScript! ! ! 
</body> 
</html> 


该 实例 功能 是 在 HTML 文档 里 输出 一 个 字符 串 ， 即 “欢迎 来 到 JavaScript 动态 世界 ”; 在 


IE 9.0 中 浏览 效果 如 图 20-1 所 示 ， 可 以 看 到 页 面 中 输出 了 两 句 话 ， 其 中 第 一 句 就 是 JavaScript 
中 的 输出 语句 。 


司 ] EA 粳 本 HTML+CSS 万 GX | 感 EN 精通 HTML+CSS 网 . x | 
文件 (站 汕 强 (E) 豆 看 (V) 。 改 硬 交 从 ) 工具 (都 寺 (H) | 


欢迎 来 到 JavaScript 动 态 世 界 


学 习 JavaScript! ! ! 


图 20-1 嵌入 JavaScript 代码 
在 JavaScript 的 语法 中 ， 分 号 (;) 是 JavaScript 程序 作为 一 个 语句 结束 的 标识 符 。 
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2. 导入 JavaScript 文件 


如 果 要 导入 JavaScript 文件 ， 需 要 将 JavaScript 做 成 一 个 独立 文件 ， 然 后 使 用 <scrip 伺 标记 
将 其 引入 到 HTML 文件 中 。 其 引入 格式 如 下 所 示 。 


<SCRIPT SRC = "hm 19.js"></SCRIPT> 
【 例 20.2】 “实例 文件 : ch20\20.2.html) 


<html> 

<head> 

<tile> 使 用 外 部 文件 </title> 

‘<script sre = "hello.js"></script> 

</head> 

<body> 

<p> 此 处 引用 了 一 个 JavaScript 文件 </p> 
</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 20-2 所 示 ， 可 以 看 到 网 页 中 首先 弹出 一 个 对 话 框 ， 显 示 提 示 信 
息 。 单 击 【 确 定 】 后 ， 会 显示 网 页 内 容 。 


司 EA 入 HTML+CSS 风 下 右 时 岂 -C X | 全 二 用 外 基文 件 x I 


文件 (月 ” 疾 强 (E) 音 看 (V) ”收藏 关 /A) 工具 (T) 英吉 (H) 
此 处 引用 了 一 个 JavaScript 文件 


全 Tes lscriot 


20.1.3 JavaScript 与 CSS 


JavaScript 和 CSS 都 一 个 共同 的 特点 ， 就 是 两 者 都 是 在 浏览 器 上 解析 并 运行 的 。CSS 用 于 
设置 网 页 上 的 样式 和 布局 ， 从 而 增加 网 页 特效 。 而 JavaScript 是 一 种 脚本 语言 ， 可 以 直接 在 网 
页 上 被 浏览 器 解释 运行 。 如 果 将 JavaScript 的 程序 和 CSS 的 静态 效果 两 者 结合 起 来 , 可 以 创建 
出 大 量 的 动态 特效 ， 即 使 用 JavaScript 的 循环 、 分 支 语句 来 控制 CSS 样式 的 不 断 转换 。 

对 于 动态 特效 , 实际 上 前 面 已 经 有 了 实现 , 例如 当 鼠 标 停留 在 表格 中 的 某 一 行 时 , 会 显示 
一 种 颜色 ， 不 停留 时 会 显示 另外 一 种 颜色 。 同 样 ， 对 于 其 他 HTML 元 素 ， 可 以 用 JavaScript 
动态 判断 ， 从 而 调用 不 同 的 CSS 样式 。 

JavaScript 和 CSS 的 结合 运用 ， 对 于 喜爱 网 页 特效 的 浏览 者 来 说 是 一 大 喜讯 。 作 为 一 个 网 
页 设计 者 ， 通 过 对 JavaScript 和 CSS 的 学 习 ， 可 以 创作 出 大 量 的 网 页 特效 。 
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20.2 ” JavaScript 语法 基础 


JavaScript 是 一 种 脚本 语言 ， 具 有 自己 的 数据 类 型 、 变 量 标识 符 、 运 算 符 和 流程 控制 。 但 
它 是 一 种 弱 类 型 语言 ， 便 于 学 习 和 掌握 。 


20.2.1 数据 类 型 


在 JavaScript 中 有 4 种 基本 的 数据 类 型 : 数值 (整数 和 实数 ) 型 、 字 符 串 型 (用 “” 号 或 
“” 括 起 来 的 字符 或 数值 )、 布 尔 型 (使 True 或 False 表示 ) 和 空 值 。 此 外 ，JavaScript 还 定义 
了 其 他 复合 数据 类 型 ， 例 如 Date 对 象 是 一 个 日 期 和 时 间 类 型 。 

JavaScript 具有 的 数据 类 型 如 表 20-1 所 示 。 


表 20-1 JavaScript 的 基本 数据 类 型 


| 数据 类 型 | 数据 类 型 和 称 | 示例 | 
123、071 (十 进 制 ) 、0X1 包 〈 十 六 进 制 ) 
| sring 。 ”| 字符 串 类 型 | 'Hello'、'get the &'、'b(@911.com'、"Hello" 


布尔 类 型 
ET ET |m | 
未 定义 类 型 没有 被 赋值 的 变量 所 具有 的 “ 值 ” 


1. 数值 型 


JavaScript 的 数值 类 型 可 以 分 为 4 类， 即 整数 、 浮 点 数 、 内 部 常量 和 特殊 值 。 

整数 可 以 为 正 数 、 零 或 者 负数 ; 浮 点 数 可 以 包含 小 数 点 ， 也 可 以 包含 一 个 “e”( 大 小 写 均 
可 , 在 科学 记 数 法 中 表示 “10 的 过 ”>),， 或 者 同时 包含 这 两 项 。 整 数 可 以 以 10 (十 进 制 )、8( 八 
进 制 )》 和 16《〈 十 六 进 制 ) 作 为 基数 来 表示 。 

内 部 常量 和 特殊 值 一 般 不 常用 ， 在 这 里 不 再 介绍 。 


2. 字符 串 型 


字符 串 是 一 对 单 引号 〈' ') 或 双 引 号 〈" ") 和 引号 中 的 部 分 构成 的 。 一 个 字符 串 也 是 Ja 
vaScript 中 的 一 个 对 象 ， 有 专门 的 属性 。 

引号 中 间 的 部 分 可 以 是 任意 多 的 字符 , 如 果 没有 则 是 一 个 空 字符 串 。 如 果 要 在 字符 串 中 使 
用 双 引 号 ， 则 应 该 将 其 包含 在 使 用 单 引 号 的 字符 串 中 ， 使 用 单 引 号 时 则 反之 。 


3. 布尔 型 


布尔 类 型 Boolean 表示 一 个 逻辑 数值 ， 用 于 表示 两 种 可 能 的 情况 。 逻 辑 真 ， 用 true 表示 ; 
逻辑 假 ， 用 false 表示 。 通 常 ， 我 们 使 用 1 表示 真 ，0 表示 假 。 


4. undefined 
未 定义 数据 类 型 undefined 表示 变量 被 创建 后 ， 该 变量 未 被 赋值 ， 那 么 此 时 变量 的 值 就 是 
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未 定义 数据 类 型 。 对 于 数字 ， 未 定义 数值 表示 NaN; 对 于 字符 串 ， 未 定义 数值 表示 undefined; 
对 于 逻辑 数值 ， 未 定义 数值 表示 为 假 。 


5. null 


在 JavaScript 里 ,使 用 null 声明 的 变量 并 不 是 0。null 是 一 个 特殊 类 型 ， 它 表示 一 个 空 值 ， 
即 没有 值 ， 而 不 是 0，0 是 有 值 的 。 

由 于 JavaScript 采用 弱 类 型 的 形式 ， 因 而 一 个 数据 的 变量 或 常量 不 必 首 先 声明 ， 而 是 在 使 
用 或 赋值 时 确定 其 数据 类 型 。 当 然 也 可 以 先 声明 该 数据 类 型 , 它 是 通过 在 赋值 时 自动 说 明 其 数 
据 类 型 的 。 
20.2.2 ”变量 

在 JavaScript 中 使 用 var 关键 字 来 声明 变量 ， 其 语法 格式 如 下 所 示 。 

var var_name; 

JavaScript 是 一 种 区 分 大 小 写 的 语言 , 因此 变量 temp 和 变量 Temp 代表 不 同 的 含义 。 另外 ， 
在 命名 变量 时 必须 遵循 以 下 规则 。 

@ 变量 名 由 字母 、 数 字 、 下 划 线 和 美元 符 组 成 。 

@ 变量 名 必须 以 字母 、 下 划 线 (_) 或 美元 符 ($) 开始 。 

@ 变量 名 不 能 是 保留 字 。 

JavaScript 语言 使 用 等 于 号 (=) 给 变量 赋值 ， 等 号 左边 是 变量 ， 等 号 右边 是 数值 。 对 变量 
赋值 的 语法 如 下 : 

变量 = 值 ; 

JavaScript 里 的 变量 分 为 全 局 变量 和 局 部 变量 两 种 。 其 中 局 部 变量 就 是 在 函数 里 定义 的 变 
量 ， 在 这 个 函数 里 定义 的 变量 仅 在 该 函数 中 有 效 。 如 果 不 加 var， 直 接 对 变量 进行 赋值 ， 那 么 
JavaScript 将 自动 把 这 个 变量 声明 为 全 局 变量 。 使 用 示例 如 下 所 示 。 

var yourAppleNumber = 100 

// 等 价 于 


Var yourAppleNumber 
yourAppleNumber = 100 


20.2.3 ”运算 符 


在 JavaScript 程序 中 ， 要 完成 各 种 各 样 的 运算 是 高 不 开 运算 符 的 。 运算 符 用 于 将 一 个 或 几 
个 值 进 行 运算 而 得 出 所 需要 的 结果 。 在 JavaScript 中 常用 的 运算 符 有 算术 运算 符 、 比 较 运算 符 
和 多 辑 运算 符 。 


"350。 
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1. 算术 运算 符 
算术 运算 符 是 最 简单 、 最 常用 的 运算 符 , 所 以 有 时 也 称 它们 为 简单 运算 符 。 可 以 使 用 它们 
进行 通用 的 数学 计算 ， 如 表 20-2 所 示 。 


表 20-2 算术 运算 符 
运算 符 说 明 示例 
+ 加 法 运算 符 或 正 值 运 算 符 x+100、100+1000、+100 
- 减法 运算 符 或 负 值 运算 符 100-60、-100 
. 乘法 运算 符 100*6 
/ 除法 运算 符 100/50 
% 求 模 运 算 符 ， 也 就 是 算术 中 的 求 余 100%30 
二 将 变量 值 加 1 后 再 将 结果 赋值 给 该 变量 “| x++ 用 于 在 参与 其 他 运算 之 前 先 将 自己 加 1 后 ， 
再 用 新 的 值 参与 其 他 运算 
++X 用 于 先 用 原 值 与 其 他 运算 后 , 再 将 自己 加 1 
- 将 变量 值 减 1 后 再 将 结果 赋值 给 该 变量 | x--、--x， 与 ++ 的 用 法 相同 


2. 比较 运算 符 

比较 运算 符 用 于 对 运算 符 的 两 个 表达 式 进 行 比较 ， 然 后 根据 比较 结果 返回 布尔 类 型 的 值 ， 
例如 ,比较 两 个 值 是 否 相同 或 比较 两 个 数值 的 大 小 等 。 表 20-3 列 出 了 JavaScript 支持 的 比较 运 
算 符 。 


表 20-3 比较 运算 符 

运算 符 ”| 说 明 示例 
一 判断 左右 两 边 表 达 式 是 否 相等 ， 当 左边 表达 式 等 于 右边 | Number 一 100 

表达 式 时 返回 tue， 否 则 返回 false Numberl 一 Number2 
= 判断 左边 表达 式 是 否 不 等 于 右边 表达 式 ， 当 左边 表达 式 | Number != 100 

不 等 于 右边 表达 时 返回 tue， 和 否则 返回 false Numberl != Number2 
> 判断 左边 表达 式 是 否 大 于 右边 表达 式 ， 当 左边 表达 式 大 | Number > 100 

于 右边 表达 式 时 返回 tue， 和 否则 返回 false Numberl > Number2 
= 判断 左边 表达 式 是 否 大 于 等 于 右边 表达 式 ， 当 边 表达 式 | Number >= 100 

大 于 等 于 右边 表达 式 时 返回 tue， 和 否则 返回 false Numberl >= Number2 
< 判断 左边 表达 式 是 否 小 于 右边 表达 式 ， 当 左边 表达 式 小 | Number < 100 

于 右边 表达 式 时 返回 tue， 和 否则 返回 false Numberl < Number2 
二 判断 左边 表达 式 是 否 小 于 等 于 右边 表达 式 ， 当 左边 表达 | Number <= 100 

式 小 于 等 于 右边 表达 式 时 返回 tue， 和 否则 返回 false Numer <= Number2 

3. 逻辑 运算 符 


逻辑 运算 符 通常 用 于 执行 布尔 运算 ， 它 们 常 和 比较 运算 符 一 起 使 用 来 表示 复杂 比较 运算 ， 


精 殉 HTML+CSS 网 页 布局 与 样式 〈 视 频 教 学 版 ) 


这 些 运算 涉及 的 变量 通常 不 止 一 个 ， 而 且 常 用 于 过、while 和 for 语句 中 。 表 20-4 列 出 了 Java 
Script 支持 的 逻辑 运算 符 。 


表 20-4 逻辑 运算 符 


运算 符 | 说 明 示例 
&& 逻辑 与 , 若 两 边 表达 式 的 值 都 为 rue, 则 返回 tue; | 100>60 &&100<200 返回 tue 
若 任意 一 个 值 为 false， 则 返回 false 100>50&&10>100 返回 false 


中 逻辑 或 ,只 有 表达 式 的 值 都 为 false 时 , 才 返 回 false | 100>60l10>100 返回 true 
100>600||50>60 返回 false 
! 逻辑 非 ， 若 表达 式 的 值 为 rue， 则 返回 false， 否 则 | !(100>60) 返 回 false 
返 true !(100>600) 返 回 true 


除 上 面 介绍 的 常用 运算 符 之 外 ，JavaScript 还 支持 条 件 表达 式 运算 符 “?”， 这 个 运算 符 是 
三 元 运算 符 ， 它 包含 3 个 部 分 : 一 个 计算 值 的 条 件 和 两 个 根据 条 件 返 回 的 真 假 值 。 格 式 如 下 所 
示 。 


条 件 ? 表达 式 1 : 表达 式 2 


在 使 用 条 件 运 算 符 时 ， 如 果 条 件 为 真 ， 则 使 用 表达 式 1 的 值 ， 否 则 使 用 表达 式 2 的 值 。 示 
例如 下 : 


(x>y)?100*3:11 


如 果 x 的 值 大 于 y 值 ， 则 表达 式 的 值 为 300; 如 果 x 的 值 小 于 或 等 于 y 值 , 表达 式 的 值 为 11。 
【 例 20.3】〔 实 例文 件 :， ch20\20.3.html) 


<html> 
<head> 
<script language = "javascript"> 
Var a=3; 
Var b=5; 
Var c=b-a: 
document.write(c+"<br>"): 
这 a>b) 
{ document write("a 大 于 b<br>"):} 
else 
{ document.write("a 小 于 b<br>"):} 
document.write(a>b?"2":"3"): 
</script> 
</head><body></body> 
</html> 


上 面 的 代码 创建 了 两 个 变量 a 和 b， 变 量 e 的 值 是 b 和 a 的 差 。 下 面 使 用 站 语句 判断 a 和 
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b 的 大 小 ， 并 输出 结果 。 最 后 使 用 了 一 个 三 元 运算 符 ， 如 果 a>b， 则 输出 2， 否则 输出 3。<br> 
表示 在 网 页 中 换行 ，“+” 是 一 个 连接 字符 串 。 
在 正 9.0 中 浏览 效果 如 图 20-3 所 示 , 可 以 看 到 网 页 中 输出 了 JavaScript 语句 的 执行 结果 。 


司 EMEHTMLcssArm P - © XS emu + cess. x 
skR 村 三 (日 ” 豆 看 (V) 以 天 工具 ID 项 动 |H) 


| > 
al 小 于 b 
3 


| 


20.2.4 ”流程 控制 语句 


JavaScript 语言 编程 中 对 流程 的 控制 主要 是 通过 条 件 判断 语句 、 循 环 控制 语句 及 continue、 
break 来 完成 的 ， 其 中 条 件 判断 语句 按 预 先 设 定 的 条 件 执行 程序 ， 包 括 站 语句 和 switch 语句 ; 
而 循环 控制 语句 则 可 以 重复 完成 任务 ， 包 括 while 语句 、do while 语句 及 for 语句 。 


1. if 语 句 


图 20-3 运算 符 的 使 用 


让 语句 是 使 用 最 为 普遍 的 条 件 选 择 语句 ， 每 一 种 编程 语言 都 有 一 种 或 多 种 形式 的 站 语 句 ， 
在 编程 中 它 是 经 常 被 用 到 的 。 格 式 如 下 所 示 。 

这 条 件 语句 ) 

{ 

执行 语句 ; 

} 

其 中 的 “条 件 语句 ”可 以 是 任何 一 种 逻辑 表达 式 ， 如 果 “ 条 件 语 句 ” 的 返回 结果 为 tue， 
则 程序 先 执行 后 面 大 括号 中 的 “执行 语句 ”， 然 后 执行 它 后 面 的 其 他 语句 。 如 果 “ 条 件 语句 ” 
的 返回 结果 为 false， 则 程序 跳 过 “执行 语句 ”， 直 接 执行 程序 后 面 的 其 他 语句 。 大 括号 的 作 
用 就 是 将 多 条 语句 组 合成 一 个 复合 语句 ， 作 为 一 个 整体 来 处 理 ， 如 果 大 括号 中 只 有 一 条 语句 ， 
则 大 括号 可 以 省 略 。 


2. if...else 语句 


让 .else 语句 通常 用 于 一 个 条 件 需 要 两 个 程序 分 支 来 执行 的 情况 。 格 式 如 下 所 示 。 
这 条 件 语句 ) 
执行 语句 块 1: 


else 
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执行 语句 块 2: 
} 
这 种 格式 在 耻 从 句 的 后 面 添加 一 个 else 从 句 ， 这 样 当 条 件 语 句 返 回 结果 为 false 时 ， 执 行 
else 从 句 。 
【 例 20.4】 《实例 文件 : ch20\20.4.html) 
<html> 
<head> 
<script language = "JavaScript"> 
Var a="john": 
ifla!="john") { 
document.write("<hl style='"text-align:center:color:red:> 欢 迎 JOHN 光临 </h1>"); 
} 
else{ 
document.write("<p style='font-size:15px:font-weight:bolder:color:blue> 请 重新 输入 名 
称 </p>"); 
</scrip> 

</head> 
<body> 
</body> 
</html> 


上 面 的 代码 中 使 用 站 .else 语句 ， 对 变量 a 的 值 进 行 判断 ， 如 果 a 值 不 等 于 “john” 则 输 
出 红色 标题 ， 否 则 输出 蓝 色 信息 。 

在 正 9.0 中 浏览 效果 如 图 20-4 所 示 , 可 以 看 到 网 页 中 输出 了 蓝 色 信息 “请 重新 输入 名 
称 ”。 


外 E\ 杖 HTML+CSS 网 员 右 岂 ”0 X | 大 E\ 精 本 HTML+CSS 网 不 右 .。x 
文件 (F) 妨 强 (E) 下 看 (V) 。 收 三 闪 [A) 工具 (Tm) 帮助 (H) 


| 请 重新 输入 名 称 


图 20-4 让..else 语句 
3. swicth 语句 
swicth 选择 语句 用 于 将 一 个 表达 式 的 结果 同 多 个 值 进 行 比较 ， 根 据 比 较 结果 选择 执行 语 
句 。 
格式 如 下 所 示 。 
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switch (表达 式 ) 
case 取 值 1: 
语句 块 1:break: 
case 取 值 2 : 
语句 块 2:break 


Case 取 值 n: 
语句 块 n:break: 
default : 
语句 块 n+l; 
} 
case 语句 只 是 相当 于 定义 一 个 标记 位 置 ， 程 序 根据 switch 条 件 表 达 式 的 结果 ， 直 接 跳 转 
到 第 一 个 匹配 的 标记 位 置 处 ， 开 始 顺 序 执行 后 面 的 所 有 程序 代码 ， 包 括 后 面 的 其 他 case 语句 
下 的 代码 ， 直 到 碰 到 break 语句 或 函数 返回 语句 为 止 。default 语句 是 可 选 的 ， 它 匹配 上 面 所 有 
的 case 语句 定义 的 值 以 外 的 其 他 值 ， 也 就 是 前 面 所 有 取 值 都 不 满足 时 ， 就 执行 default 后 面 的 
语句 块 。 
4. while 语句 
while 语句 是 循环 语句 ， 也 是 条 件 判 断 语 句 。 格 式 如 下 所 示 。 


while( 条 件 表达 式 语句 ) 
{ 
执行 语句 块 

} 

当 “ 条 件 表 达 式 语句 ”的 返回 值 为 tue 时 ， 则 执行 大 括号 中 的 语句 块 ， 当 执行 完 大 括号 
中 的 语句 块 后 ， 再 次 检测 条 件 表达 式 的 返回 值 ， 如 果 返 回 值 还 为 tue， 则 重复 执行 大 括号 中 的 
语句 块 ， 直 到 返回 值 为 false 时 ， 结 束 整个 循环 过 程 ， 接 着 往 下 执行 while 代码 段 后 面 的 程序 
代码 。 

5. do while 语句 


do while 语句 的 功能 和 while 语句 相似 ， 只 不 过 它 是 在 执行 完 第 一 次 循环 之 后 才 检测 条 件 
表达 式 的 值 ， 这 意味 着 包含 在 大 括号 中 的 代码 块 至 少 要 被 执行 一 次 ， 另 外 ，do while 语句 结尾 
处 的 while 条 件 语句 的 括号 后 有 一 个 分 号 “;”。 

格式 如 下 所 示 。 


do 
{ 

执行 语句 块 
}while( 条 件 表达 式 语句 ): 
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6. for 语句 
for 语句 通常 由 两 部 分 组 成 ， 即 条 件 控制 部 分 和 循环 部 分 。 格 式 如 下 所 示 。 


for( 初 始 化 表达 式 ; 循环 条 件 表达 式 ; 循环 后 的 操作 表达 式 ) 

{ 

执行 语句 块 

} 

在 使 用 for 循环 前 要 先 设 定 一 个 计数 器 变量 ， 可 以 在 for 循环 之 前 预先 定义 ， 也 可 以 在 使 
用 时 直接 定义 。 在 上 述 语 法 格式 中 , “初始 化 表达 式 ” 表 示 计 数 器 变量 的 初始 值 ; “循环 条 件 
表达 式 ” 是 一 个 计数 器 变量 的 表达 式 ， 决 定 了 计数 器 的 最 大 值 :; “循环 后 的 操作 表达 式 ” 表 示 
循环 的 步 长 ， 也 就 是 每 循环 一 次 ， 计 数 器 变量 值 的 变化 ， 该 变化 可 以 是 增 大 的 ， 也 可 以 是 减 小 
的 ， 或 其 他 运算 。for 循环 是 可 以 嵌 套 的 ， 也 就 是 在 一 个 循环 里 还 可 以 有 另 一 个 循环 。 

【 例 20.5】 “实例 文件 :ch20\20.5.html) 


<html> 
<head> 
<script language = "javascript"> 
for(var 运 0:i<S:i++){f 
document .write("<p style='font-size:"+i+"0px> 欢 迎 学 习 javascript</p>"); 
} 
</script> 

</head> 
<body> 

</body> 
</html> 


上 面 的 代码 中 使 用 for 循环 输出 了 不 同 字体 大 小 的 句子 。 
在 正 9.0 中 浏览 效果 如 图 20-5 所 示 ， 可 以 看 到 网 页 中 输出 了 不 同 大 小 的 句子 ， 从 小 到 大 
依次 排列 。 


人 村 司 ] EN\ 往 通 HTML+CSS 网 页 布 书 s 岂 ”CX 上 | 大 EN 精通 HTML+CSS 网 页 布 .，x Re 


文件 (月 ” 妨 强 (E) 得 看 (V】 收藏 天 (A) 工具 (T) 和 动 (H) 


| rarascriet | 


| 欢迎 学 习 JavaScript | 
| 欢迎 学 习 JavaScript 


欢迎 学 习 JavaScript 


图 20-5 for 循环 
除 上 面 的 语句 之 外 ，JavaScript 还 可 以 使 用 中 断 语 句 break 和 continue。break 语句 可 以 中 
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止 循环 体 中 的 执行 语句 和 switch 语句 。 一 个 无 标号 的 break 语句 会 把 控制 传 给 当前 循环 Cwhil 
e、do、for 或 switch) 的 下 一 条 语句 ， 如 果 有 标号 ， 控 制 会 被 传递 给 当前 方法 中 带 有 这 一 标号 
的 循环 语句 。continue 语句 只 能 出 现在 循环 语句 (while、do、for) 的 循环 体 语 句 中 ， 无 标号 
的 continue 语句 的 作用 是 跳 过 当前 循环 的 剩余 部 分 ， 接 着 执行 下 一 次 循环 。 


20.2.5 ”函数 


如 果 在 一 个 程序 中 需要 使 用 某 段 功能 代码 达到 十 次 或 更 多 次 ,这 时 可 以 将 这 这 个 功能 代码 
组 成 一 个 可 以 调用 的 函数 ， 通 过 调用 该 函数 来 执行 相应 的 语句 ， 这 样 程序 就 将 变 得 非常 简洁 ， 
便于 后 期 维护 。 

在 JavaScript 中 定义 一 个 函数 时 , 必须 以 function 关键 字 开头 , 函数 名 跟 在 关键 字 的 后 面 ， 
接着 是 函数 参数 列表 和 函数 所 执行 的 程序 代码 段 。 定 义 一 个 函数 的 格式 如 下 所 示 。 


function 函数 名 (参数 列表 ) 
1 
程序 代码 ; 
Teturn 表达 式 ; 
} 
在 上 述 格式 中 , 参数 列表 表示 在 程序 中 调用 某 个 函数 时 传递 到 函数 中 的 某 种 类 型 的 值 或 变 
量 ， 如 果 这 样 的 参数 多 于 一 个 ,那么 两 个 参数 之 间 需 要 用 逗号 隔 开 。 虽 然 有 些 函 数 并 不 需要 接 
收 任何 参数 ,但 在 定义 函数 时 也 不 能 省 略 函 数 名 后 面 的 小 括号 , 保留 小 括号 中 的 内 容 为 空 即 可 。 
另外 ,函数 中 的 程序 代码 必须 位 于 大 括号 之 间 ， 如 果 主 程序 要 求 返回 一 个 结果 集 ， 就 必须 
使 用 retum 语 名 后面 跟 上 这 个 要 返回 的 结果 。 当 然 ，retum 语句 后 可 以 跟 一 个 表达 式 ， 返 回 值 
将 是 表达 式 的 运算 结果 。 如 果 在 函数 程序 代码 中 省 略 了 retum 语句 后 的 表达 式 , 或 者 函数 结束 
时 没有 returm 语句 ， 这 个 函数 就 返回 一 个 undefined 值 。 
【 例 20.6】 实 例文 件 ，ch20\20.6.html) 


<html> 
<head> 
<title> 计 算 器 </title> 
<script language="javascript" > 
function compute(op) 
上 
var num1=0: 
Var num2=0: 
Duml=parsefloat(documentmyformn.numl.value): 
Dum2=parsefloat(documentmyformn.num2.value): 
ff(op=="+") 
document.myform.result.value=numl+num2 : 
ECOp 
document.myform.result.value=numl-num2 : 
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f(op=—="*") 
documentmyform resultvalue=numl*num2 
if (op=="/" && num?2!=0) 
document.myform.result.value=num1/num? 
上 
</script> 
</head> 
<body> 
<form action="" method="post" name="myform" id="myform"> 
<p> 第 一 个 数 
<input name="numl" type="text" id="num1" size="25"> 
<br> 
第 二 个 数 
<input name="num2" type="text" id="num2" size="25"> 
</p> 
<p> 
<input name="addbutton" type="button" id="addbutton" value=" + "onclick="compute(+")"> 
<input name="subbutton" type="button" id="subbutton" value=" 一 " onclick="compute(-")"> 
<input name="mulbutton" type="button" id="mulbutton" value=" x "onclick="compute(*")"> 
<input name="divbutton" type="button" id="divbutton" value=" = "onclick="compute(/)"> 
<p> 
<p> 计 算 结果 
<input name="result" type="text" id="result" size="25"> 
</p> 
</form> 
<p>&nbsp: </p> 
</body> 
</html> 


在 下 9.0 中 浏览 效果 如 图 20-6 所 示 ， 可 以 看 到 输入 两 个 不 同 的 数值 ， 可 以 求 它们 的 和 、 
差 、 积 和 商 。 


S 间 EN 精 王 HTML+CSSR? DD - C X | 合计 算 下 x| 


文件 (月 ” 沪 强 (E) 各 看 [V) 收 荐 交 (A) 工具 (D) 。 磊 助 (H) 


第 一 个 数 
第 二 个 数 


图 20-6 使 用 函数 
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JavaScript 不 但 允许 用 户 根据 自己 的 需要 自 定义 函数 ， 还 支持 大 量 的 系统 函数 。 常 用 的 系 
统 函数 如 表 20-5 所 示 。 


表 20-5 常用 系统 函数 


名 称 说 明 

eval( 返回 字符 串 表 达 式 中 的 值 

parseInt0 返回 不 同 进 制 的 数 , 默认 是 十 进 制 , 用 于 将 一 个 字符 串 按 指定 的 进 制 转换 成 一 个 整 
数 

parseFloat() 返回 实数 ， 用 于 将 一 个 字符 串 转换 成 对 应 的 小 数 

escape() 返回 对 一 个 字符 串 进行 编码 后 的 结果 字符 串 

encodeURI 返回 对 一 个 URI 字符 串 编码 后 的 结果 

decodeURI 将 一 个 已 编码 的 URI 字符 串 解码 成 最 原始 的 字符 串 并 返回 

unescape (0 将 一 个 用 escape 方法 编码 的 结果 字符 串 解码 成 原始 字符 串 并 返回 

isNaNO 检测 parseInt0 和 parseFloatO 函 数 返回 值 是 否 为 非 数值 型 , 如 果 是 , 返回 tue, 否则 ， 
返回 false 

abs(x) 返回 x 的 绝对 值 

acos(x) 返回 x 的 反 余弦 值 ( 余 弦 值 等 于 x 的 角度 ) ， 用 弧度 表示 

asin(x) 返回 x 的 反正 弦 值 

atan(x) 返回 x 的 反正 切 值 

atan2(x.y) 返回 复 平面 内 点 (x，y) 对 应 的 复数 的 幅 角 ， 用 弧度 表示 ， 其 值 在 - 7 到 之 间 

ceil(x) 返回 大 于 等 于 x 的 最 小 整数 

cos(x) 返回 x 的 余弦 

exp(x) 返回 e 的 x 次 寡 (ex) 

floor(x) 返回 小 于 等 于 x 的 最 大 整数 

log(x) 返回 x 的 自然 对 数 (In x) 

max(a, b) 返回 a，b 中 较 大 的 数 

min(a, b) 返回 a，b 中 较 小 的 数 

pow(n, m) 返回 n 的 m 次 暴 (nm) 

random() 返回 一 个 大 于 0 小 于 1 的 随机 数 

round(x) 返回 x 四舍五入 后 的 值 

sin(x) 返回 x 的 正弦 

sqrt(x) 返回 x 的 平方 根 

tan(x) 返回 x 的 正切 -isFinite0 如 果 括 号 内 的 数字 是 有限 ”的 ( 介 于 Number.MIN_VALUE 
和 NumberMAX VALUE 之 间 ) 就 返回 true; 否则 返回 false 

toStringO 把 对 象 转换 成 字符 串 。 如 果 在 括号 中 指定 一 个 数值 , 则 转换 过 程 中 所 有 数值 转换 成 
特定 进 制 
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20.3 综合 实例 1 一 一 打字 效果 的 文字 


文字 是 网 页 的 灵魂 ， 没 有 文字 的 网 页 ， 不 管 特效 多 么 绚丽 多 彩 也 没有 任何 实际 意义 。 文 字 
特效 始终 是 网 页 设计 追求 的 目标 ， 通 过 JavaScript 可 以 实现 多 个 网 页 特效 。 文 字 的 打字 效果 通 
过 JavaScript 脚本 程序 ， 将 预先 设置 好 的 文字 逐一 在 页 面 上 显示 出 来 。 具 体 步骤 如 下 所 示 。 

OY 分 析 需 求 。 


如 果 要 在 网 页 中 实现 打字 效果 ,需要 创建 预先 设置 好 的 文字 ,作为 输出 信息 。 该 实例 完成 
后 ， 效 果 如 图 20-7 所 示 。 


| 县 [© EwaHrvcss Pp - ox |@ rrmmexF 
EXE CE TOETT 


| 松 风水 月 最 新 数 博 信息 : 关心 身体 ,就 是 关心 自己 


图 20-7 打字 效果 
to3 创建 HTML 页 面 ， 设 置 页 面 基本 样式 。 


<html> 

<head> 

<title> 打 字 效 果 的 文字 </title> 

<style type="text/css"> 

body {font-size: 14px:font-weight:bold:} 
</style> 

</head> 

<body> 

松 风水 月 最 新 微 博信 息 : <a id="HotNews" href="" target="_blank"></a> 
</body> 

</html> 


上 面 代码 中 ， 在 <head> 标 记 中 间 设 置 了 body 页 面 的 基本 样式 ， 例 如 字体 大 小 为 14 像素 ， 


字形 加 粗 。 并 在 body 页 面 中 创建 了 一 个 超级 链接 。 在 正 9.0 中 浏览 效果 如 图 20-8 所 示 ， 可 以 
看 到 页 面 中 只 显示 了 一 个 提示 信息 。 


MB bserawdmins P - Ox| 后 5=XROX 
Er 


松 风 水 月 最 新 油 博 信息 : 


图 20-8 页 面 基 本 样式 


*。360。 
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i03j 添加 JavaScript 代码 ， 实 现 打 字 特 效 。 


<script language="JavaScript"> 

<<!-- 

var NewsTime = 2000:; /每 条 微 博 的 停留 时 间 

var TextTime = 50: 。“// 微 博文 字 出 现 的 等 待 时 间 ， 越 小 越 快 
Var newsi = 0; 

Var txti = 0; 

Var txttimer; 


Var newstimer; 

var newstitle = new Array0: // 微 博 标 题 
var newshref = new Array(); “// 微 博 链接 
newstitle[0] = "健康 是 身体 的 本 钱 ": 


Dewshref[1] = 
newstitle[2] = 
newshreff2] = "#"; 

newstitle[3] = "大 雨 倾盆 ， 很 大 呀 ": 


newshreff3] = "#"; 
function shownew() 
{ 

var endstr=" " 


hwnewstr = newstitle[newsi]: 
newslink = newshreffnewsi]: 
if(txti==(hwnewstr.length-1)) {endstr="":} 
if(txti>=hwnewstr.length){ 

clearInterval(txttimer): 

clearInterval(newstimer); 

newsit+; 

if(newsi>=newstitle.length){ 

newsi=0 

} 

newstimer = setInterval("shownew()",NewsTime): 

txti= 0: 

return: 
} 
clearInterval(txttimer): 
document.getElementById("HotNews").href—newslink: 
document.getElementById("HotNews").innerHTML = hwnewstr.substring(0.txti+1)+endstr: 
txti++: 
txttimer = setInterval("shownew()".TextTime): 
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</script> 

因为 上 面 的 代码 是 一 个 整体 ， 这 里 不 分 开 介绍 。 代 码 中 主要 调用 shownew0 函 数 完成 打字 
效果 。 在 开始 部 分 ， 定 义 了 多 个 变量 ， 其 中 数组 对 象 newstitle 用 于 存放 文本 标题 。 下 面 创 建 
了 shownew0 〇 函数 ， 并 在 函数 中 通过 变量 和 条 件 获 取 要 显示 的 文字 ， 通 过 setInterval 
("shownew0",NewsTime) 语 句 输 出 文字 内 容 。 代 码 最 后 使 用 shownew0 语 句 循 环 执行 该 函数 中 
的 输出 信息 。 

在 正 9.0 中 浏览 效果 如 图 20-9 所 示 ， 可 以 看 到 页 面 中 每 隔 一 段 时 间 ， 就 会 在 提示 信息 后 
逐个 打出 单个 文字 ， 字 体 颜 色 为 蓝 色 。 


ey SN x 


la 今 器 EN 二 本 HTML+CSS 人 ~ OX | 合生 字 人 时 的 文字 x ™| 


文件 肯 。 六 颈 (E) 三 看 (V) 效 家 闪 (A) 工具 TT 帮 吧 (H) 
松 风 水 月 最 新 敬 博 信息 : 去 西藏 旗 游 了 


图 20-9 实现 打字 效果 
20.4 综合 实例 2 一 一 文字 升降 特效 


有 的 网 页 为 了 增加 广告 宣传 力度 ， 往 往 会 设置 一 些 自动 升降 的 文字 ， 用 于 吸引 人 的 注意 。 
当 单 击 这 些 升降 文字 时 , 会 自动 跳 转 到 宣传 页 面 。 本 实例 将 使 用 JavaScript 和 CSS 实现 文字 升 
降 效 果 。 有 具体 步骤 如 下 所 示 。 

to 出 分 析 需 求 .。 


如 果 要 实现 文字 升降 ， 需 要 指定 文字 内 容 和 文字 升降 范围 ， 即 在 HTML 页 面 中 指定 一 个 
层 ， 用 于 升降 文字 。 实 例 完成 后 ， 实 际 效果 如 图 20-10 所 示 。 


Fe be 


CDOSommmossmm ocxjsrnexr > CC 


水 月 大 酒店 ,欢迎 天 下 来 宾 ! 


20-10 文字 升降 
to3 创建 HTML， 构 建 升降 DIV 层 。 


ee 
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<html> 

<head> 

<title> 升 降 的 文字 效果 </title> 

</head> 

<body> 

<div id="napis" style="position: absolute:top: -50:;color: #000000:font-family: 宋 体 :font-size:9pt:border:1px 
#ddeecc solid"> 

<a href="" style="font-size:12px:text-decoration:none:"> 

水 月 大 酒店 ， 欢 迎 天 下 来 宾 ! 

</a></div> 

<script language="JavaScript"> 

<!-- 

setTimeout('start()',20); 

/1/--> 

</scrip> 

</body> 

</html> 


上 面 的 代码 创建 了 一 个 DIV 层 ， 用 于 存放 升降 的 文字 ， 层 id 的 名 称 是 napis， 并 在 层 的 
style 属性 中 定义 了 层 显示 样式 ， 如 字体 大 小 、 带 有 边框 、 字 形 等 。 在 DIV 层 中 ， 创 建 了 一 个 
超级 链接 ， 并 设 定 了 超级 链接 的 样式 。 其 中 的 script 代码 ， 用 于 定时 调用 start 函数 。 

在 正 9.0 中 浏览 效果 如 图 20-11 所 示 ， 可 以 看 到 页 面 空白 ， 无 文字 显示 。 


他 癌 Hoenwdmis 户 - OX [Ere 
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图 20-11 空白 页 面 效果 
3 添加 JavaScript 代码 ， 实 现 文字 升降 。 


<script language="JavaScript"> 
<!-- 
done = 0: 
step =4 
function anim(yp.yk) 
{ 
if(document.layers) document.layers["napis"].top=yp: 
else document.all["napis"].style.top=yp: 
这 yp>ylg step = -4 
这 yp<60) step = 4 
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setTimeout(anim(+(Yyp+step)+' ,+ykt] 35); 
} 
function startO 
{ 
这 done) retum 
done=1; 
if(navigator.appName=—"Netscape") { 
var nap=document.getElementById("napis"): 
nap.left=innerWidth/2 - 145; 
anim(60,innerHeight - 60) 
} 
else { 
napis.style.left=11; 
anim(60,document.body.offsetHeight - 60) 
HM/-> 
</script> 


上 面 的 代码 创建 了 函数 anim0 和 start0， 其 中 anim0 函 数 用 于 设 定 每 次 升降 的 数值 ，start() 
函数 用 于 设 定 每 次 开始 的 升降 坐标 。 在 正 9.0 中 浏览 效果 如 图 20-12 所 示 ， 可 以 看 到 页 面 中 超 


级 链接 自动 上 下 移动 。 


本 Huaerswdmiris 月 - CX|| 司 过活 
文 汪 有 。 克 二 日。 看 看 M 尽量 二 A) 工具 各 人 


水 月 大 本 让 ， 欢 凶 天 下 灯 应 了 


20-12 ”上 下 移动 效果 


20.5 ”综合 实例 3 一 一 跑马 灯 效 果 


网 页 中 有 一 种 特效 称 为 跑马 灯 , 即 文字 从 左 到 右 自 动 输出 , 和 写字 楼 的 广告 霓虹灯 非常 相 
似 。 在 网 页 中 ， 如 果 CSS 样式 非常 完美 ， 就 能 设计 出 更 加 靓丽 的 网 页 效果 。 有 具体 步骤 如 下 所 


不 。 


(0 分 析 需 求 。 


要 完成 跑马 灯 效果 ， 需 要 使 用 JavaScript 语言 设置 文字 内 容 、 移 动 速度 和 相应 的 输入 框 ， 


使 用 CSS 设置 显示 文字 样式 。 输 入 框 用 来 显示 水 平移 动 文字 。 完 成 后 ， 实 际 效果 如 图 


所 示 。 
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昧 中 原文 化 ， 寄 情 黄河 


图 20-13 ”跑马 灯 效果 
03 创建 HTML， 实 现 输入 表单 。 


<html> 

<head> 

<title> 跑 马 灯 </title> 

</head> 

<body onLoad="LenScroll0"> 
<center> 

<form name="nextForm"> 
<input type=text name="lenText"> 
</form> 

</center> 

</body> 


上 面 的 代码 非常 简单 ， 创 建 一 个 表单 ， 表 单 中 存放 了 一 个 文本 域 ， 用 于 显示 移动 文字 。 
在 正 9.0 中 浏览 效果 如 图 20-14 所 示 ， 可 以 看 到 页 面 中 只 存在 一 个 文本 域 ， 没 有 其 他 显 


四 HNUsersVd 
文件 旧 。 六 误 晶 下 看 (| 


图 20-14 实现 基本 表单 
03) 添加 JavaScript 代码 ， 实 现 文字 移动 。 


<script language="javascript"> 

var msg=" 品 味 中 原文 化 ， 寄 情 黄 河 风景 ": // 移 动 文字 

var interval = 400: /移动 速度 

Var seq=0: 

function LenScrollO { 
document.nextForm.lenText.value = msg.substring(seq. msg.length) 十” “十 msg: 
Seq+ 十 : 
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if (seq> msg.length ) 
seq=0; 
window.setTimeout("LenScroll0:", intervaD: 
} 
</script> 
在 上 面 的 代码 中 ,变量 msg 用 于 定义 移动 的 文字 内 容 ， 变 量 interval 用 于 定义 文字 移动 速 
度 ，LenScroll0 函 数 用 于 在 表单 输入 框 中 显示 移动 信息 。 
在 正 9.0 中 浏览 效果 如 图 20-15 所 示 ， 可 以 看 到 输入 框 中 显示 了 移动 信息 ， 并 且 文字 从 
右 向 左 移动 。 


站 HNUserswdminis 只- CX Ea 
文件 (站 测 友 (E) 豆 看 (V)。 改 三 窑 内 ) 工具 [大 HH) 


， 寄 情 黄河 风景 。 品味 中 


图 20-15 “实现 移动 效果 
0 弥 添加 CSS 代码 ， 修 饰 输入 框 和 页 面 。 


<style type="text/css"> 
<!-- 
body{ 
background-color:#FFFFFF: /# 页 面 背景 色 */ 
上 
input{ 
background:transparent: 必 输入 框 背景 透明 */ 
border:none: /#* 无 边框 */ 
color:#ffb400: 
font-size:45px: 
font-weight:bold: 
font-family: 黑 体 : 
}--></style> 
上 面 的 代码 设置 了 页 面 背景 颜色 为 白色 , 在 input 标记 选择 器 中 , 定义 了 边框 背景 为 透明 ， 
无 边框 ， 字 体 颜色 为 黄色 ， 字 体 大 小 为 45 像素 ， 加 粗 并 黑体 显示 。 在 正 9.0 中 浏览 效果 如 图 
20-16 所 示 ， 可 以 看 到 与 原来 的 页 面相 比 ， 显 示 字 体 变 大 ， 颜 色 为 黄色 ， 没 有 输入 框 显示 。 
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， 寄 情 黄 河 风景 ”品味 


图 20-16 最 终 效果 
20.6 ”综合 实例 4 一 一 闪烁 图 片 


图 片 闪烁 是 一 种 常用 的 特效 ， 用 JavaScript 实现 起 来 非常 简单 ， 需 要 注意 时 间 间 隔 这 个 参 
数 ， 数 值 越 大 闪烁 越 不 连续 ， 数 值 越 小 闪烁 越 历 害 ， 可 以 随意 更 改 这 个 值 ， 直 到 取得 满意 的 效 
果 为 止 。 具 体 步 骤 如 下 所 示 。 

i0 分 析 需 求 。 


将 图 片 放 在 一 个 DIV 层 上 ， 设 定 图 片 为 可 见 ， 然 后 使 用 JavaScript 程序 代码 设置 DIV 层 
的 显示 和 隐藏 ， 这 样 就 获得 了 图 片 的 闪烁 效果 。 实 例 完成 后 ， 效 果 如 图 20-17 所 示 。 


图 20-17 图 片 闪烁 效果 
I02 创建 HTML 页面， 构建 DIV 层 。 


<html> 

<head> 

<title> 闪 烁 图 片 </title> 

</head> 

<body onload="socceronload()" topmargin="0"> 
<div id="soccer" style="position:absolute: left:150: top:0"> 
<a href=""> 

<img src="feng.jpg" border="0"></a> 

</div> 

</body> 

</html> 
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在 上 面 的 代码 中 ， 创 建 了 一 个 层 ， 其 ID 名 称 为 soccer， 样 式 为 绝对 定位 ， 坐 标 位 置 为 
(150.0) 。 然 后 在 层 中 创建 了 一 个 图 片 ， 不 带 有 边框 。 
在 正 9.0 中 浏览 效果 如 图 20-18 所 示 ， 可 以 看 到 页 面 中 显示 一 个 图 片 ， 不 具有 闪烁 效果 。 


图 20-18 创建 图 片 
io3j 添加 JavaScript 代码 ， 实 现 图 片 闪 烁 效果 。 


<script language="JavaScript"> 

var msecs = 500: // 改 变 时 间 得 到 不 同 的 闪烁 间隔 ; 

Var counter = 0: 

function soccerOnloadO { 

setTimeout("blinkO)", msecs): 

} 

function blinkO { 

(soccer.style.visibility == "hidden") ? "visible" : "hidden": 

counter +=1; 

setTimeout("blinkO", msecs): 

} 

</script> 

在 JavaScript 代码 中 ， 创 建 变量 msecs 用 于 定义 闪烁 时 间 间 隔 ， 创 建 变量 counter 用 于 计 
数 。 在 函数 soccerOnload0 中 设 定 每 隔 指定 时 间 图 片 闪烁 一 次 ,函数 blinkO 用 于 设 定 图 片 显示 ， 
即 图 片 是 隐藏 还 是 可 见 。 

在 正 9.0 中 浏览 效果 如 图 20-19 所 示 , 可 以 看 到 网 页 中 显示 一 个 图 片 , 在 指定 时 间 内 闪烁 ， 
图 中 是 闪烁 消失 的 时 刻 。 


20-19 最终 效果 
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20.7 ”综合 实例 5 一 一 左右 移动 的 图 片 


在 网 页 中 , 经 常会 出 现 从 右 到 左 移动 或 者 从 左 到 右 移 动 的 一 张 或 者 多 张 图 片 。 这 样 不 但 可 


以 增加 页 面 效 果 , 也 能 获取 经 济 利益 。 本 实例 将 使 用 JavaScript 和 CSS 创建 一 个 左右 移动 的 图 


片 。 


有 具体 步骤 如 下 所 示 。 
1. 分析 需求 
要 实现 左右 移动 的 图 片 ， 需 要 在 页 面 上 定义 一 张 图 片 ， 然 后 利用 JavaScript 程序 代码 ， 获 


取 图 片 对 象 ， 并 使 其 在 一 定 范围 内 ， 即 水 平方 向 上 自由 移动 。 实 例 完成 后 ， 效 果 如 图 20-20 所 


不 。 


ee 可 | EA 宇通 HTML+CSS ”CX | 车 三 右 移动 图 片 


文件 (月 ” 沪 强 (E) 。 豆 看 (V) 收 若 夫 (内 工具 (D 。 帮 动 (H) 


图 20-20 图片 移动 效果 
2. 创建 HTML 页 面 ， 导 入 图 片 


<html> 

<head> 

<title> 左 右 移动 图 片 </title> 

</head> 

<body> 

<img src="feng.jpe" name="picture" 
style="position: absolute: top: 70px: left: 30px:" BORDER="0" WIDTH="140" HEIGHT="40"> 
<script LANGUAGE="JavaScript"><!-- 
setTimeout("moveLR(Ppicture.300.1)".10): 
//--></script> 

</body> 

</html> 


上 面 的 代码 中 ， 定 义 了 一 个 图 片 ， 图 片 是 绝对 定位 ， 左 边 坐标 位 置 是 〈70.30) ， 无 边框 ， 


宽度 为 140 像素 ， 高 度 为 40 像素 。 在 script 标记 中 使 用 setTimeonut 方法 ， 定 时 移动 图 片 。 


在 正 9.0 中 浏览 效果 如 图 20-21 所 示 ， 可 以 看 到 网 页 中 显示 一 个 图 片 。 


图 20-21 图 片 显示 
3. 加 入 JavaScript 代码 ， 实 现 图 片 的 左右 移动 
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obj = documentimages[objID]: 

image width = obj-width: 

X1 = obj.style.left: 

X=Number(x1.substring(0.xl.length-2)): // 30px -> 30 

if(c—0){ 

if (movingarea width 一 0) { 

Tight margin = window_width - image width: 

anim(x,right margin,1); 

5 

else { 

right margin = x + movingarea width - image_width: 

if (movingarea width <x + image width) window.alert("No space for moving!"): 
else anim(x,right_margin,1): 

B 

} 

else { 

if (movingarea_width == 0) right_margin = window_width - image_width; 
else { 

x = Math.round((window_width-movingarea_width)/2): 

right_ margin = Math.round((window_width+movingarea_ width)/2)-image_width: 
b 

anim(x,right_margin,1); 

} 

} 

1/--></script> 


上 面 的 代码 和 文字 水 平方 向 移动 原理 基本 相同 ， 只 是 对 象 不 同 ， 这 里 就 不 再 介绍 。 


在 下 9.0 中 浏览 效果 如 图 20-22 所 示 ， 可 以 看 到 网 页 中 显示 一 个 图 片 ， 在 水 平方 向 上 自由 
移动 。 


司 ] BR 精通 HTML+CSS 有 巍 - GX 二 证 你 动画 片 
文件 (有) 奖 名 (E) 于 看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 


图 20-22 最 终 效果 
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20.8 综合 实例 6 一 一 向 上 滚动 菜单 


网 页 包含 信息 比较 多 的 时 候 ， 就 需要 设计 一 些 导航 菜单 来 实现 页 面 导 航 。 使 用 JavaScript 
代码 将 菜单 做 成 动态 效果 ,菜单 会 更 加 吸引 人 。 本 实例 将 结合 前 面 学 习 的 内 容 , 创建 一 个 向 上 
滚动 的 菜单 。 具 体 步 又 如 下 所 示 。 


0 和 分 析 需 求 。 


要 实现 菜单 自动 从 下 到 上 滚动 ， 需 要 把 握 两 个 元 素 ， 一 个 是 使 用 JavaScript 实现 要 滚动 的 
菜单 ， 即 导航 栏 ， 另 一 个 是 使 用 JavaScript 控制 菜单 移动 方向 。 实 例 完成 后 ， 效 果 如 图 20-23 
所 示 。 


[rr 


文件 (站 闫 坟 (去 者 (V)】 次 芝 突 A) 工具 (D。 厅 动 人 


图 20-23 ”滚动 菜单 
Log 构建 HTML 页 面 。 


<html> 

<head> 

<title> 向 上 滚动 的 菜单 </title> 

</head> 

<body bgcolor="#FFFFFF" text="#000000"> 
</body> 

</html> 


上 面 的 代码 比较 简单 ， 只 实现 了 一 个 空白 页 面 ， 页 面 背景 色 为 白色 ， 前 景色 为 黑色 。 
在 下 9.0 中 浏览 效果 如 图 20-24 所 示 ， 可 以 看 到 一 个 空白 页 面 。 
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20-24 空白 HIML 页 面 
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3 添加 JavaScript 代码 ， 实 现 菜单 滚动 。 


<script language=javascript> 
a 
varindex=9 
link = new Array(8): 
link[0] =timelhtm' 
link[1] =time2.htm' 
link[2] =time3.htm' 
link[3] =timel.htmy' 
link[4] =time2.htmy' 
link[s] =time3.htm' 
link[6] =timel.htmy 
link[7] ="time2.htm' 
link[8] =time3.htmy' 
text = new Array(8): 
text[0] = 首页 ' 
text[1] = 产品 天 地 ' 
text[2] = 关于 我 们 ' 
text[3] = 资讯 动态 ' 
text[4] =' 服 务 支持 ' 
text[5] = 会 员 中 心 ' 
text[6] = 网 上 商城 ' 
text[7] = 官方 微 博 ' 
text[8] = 企业 文化 ' 
document.write ("<marquee scrollamount='1' scrolldelay="100' direction= "up' width='150' height="150'>"); 
for (i=0:i<index:i++) 
{ 
document.write("&nbsp:<img src='dian3.gif width="12' height="12'><a href="+link[i]+" target="_blank’>"); 
document.write (text[i] + "</A><br>"): 
} 
document.write ("</marquee>") 
// --></script> 


上 面 的 代码 创建 了 两 个 数组 对 象 link 和 text， 用 来 存放 菜单 链接 对 象 和 菜单 内 容 , 在 下 面 
的 JavaScript 代码 中 ， 使 用 <marquee> 定 义 页 面 在 垂直 方向 上 下 移动 。 
在 正 9.0 中 浏览 效果 如 图 20-25 所 示 ， 可 以 看 到 面 左 侧 有 一 个 菜单 ， 自 下 向 上 自由 移动 。 
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图 20-25 ”最 终 效果 
20.9 ”综合 实例 7 一 一 跟随 鼠标 移动 的 图 片 


在 众多 网 站 中 ,特别 是 游戏 网 站 或 小 型 商业 网 站 ， 都 喜欢 使 用 鼠标 图 片 跟随 的 特效 ， 这 样 
一 方面 可 以 在 鼠标 指针 旁边 加 上 网 站 说 明 的 相关 信息 或 者 欢迎 信息 , 男 一 方面 也 吸引 人 的 注意 
力 ， 使 其 更 加 关注 此 网 站 。 本 实例 实现 图 片 跟 随 鼠 标 移动 的 特效 ， 具 体 步 又 如 下 所 示 。 


0 分 析 需 求 .。 


要 实现 该 效果 ， 需 要 通过 JavaScript 获取 鼠标 指针 的 位 置 ， 并 且 动 态 调整 图 片 的 位 置 。 通 
过 position 的 绝对 定位 ， 很 容易 调整 图 片 位 置 。 采 用 CSS 的 绝对 定位 是 JavaScript 调整 页 面 元 
素 时 常用 的 方法 。 实 例 完 成 后 ， 效 果 如 图 20-26 所 示 。 
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图 20-26 移动 的 图 片 


92 创建 基本 HTML 页 面 。 


<html> 

<head> 

<title> 随 鼠标 移动 的 图 片 </title> 
</head> 

<body> 

</body> 

</html> 


上 面 的 代码 比较 简单 ， 只 实现 了 一 个 HTML 页 面 结构 。 
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I03) 添加 JavaScript 代码 ， 实 现 图 片 随 鼠 标 移动 。 


<script type="text/javascript"> 
function badAD(htmD){ 
Var ad=document.body.appendChild(document.createElement('div")): 
ad.style.cssText="border: 1px solid #000:background:#FFF:position:absolute:padding:4px 4px 4px 4px; 
font: 12px/1.5 verdana:": 
ad.innerHTML=htmlll'This is bad idea!"; 
Var c=ad.appendChild(document.createElement('span')): 
c.innerHTML="*"; 
Cc.style.cssText="position:absolute:right:4px;top:2px;cursor:pointer"; 
c.onclick=function |O{ 
document.onmousemove=null; 
this.parentNode.style.left='-99999px' 
; 
document.onmousemove=function (e){ 
e=ellwindow.event; 
Var x=e.clientX,y=e.clientY:; 
setTimeout(function() { 


if(ad.hover) return: 
ad.style.left=x+5+'px'; 
ad.style.top=y+S+'PX' 
}.120) 
ad.onmouseover=function O{ 
this.hover=true 
}; 
ad.onmouseout=function (|){ 
this.hover=false 
} 
} 
badAD(<img src="18.png">) 
</script> 


在 上 面 的 代码 中 ， 使 用 appendChild0 方 法 为 当前 页 面 创建 了 一 个 DIV 对 象 ， 并 为 DIV 层 
设置 了 相应 样式 。 下 面 的 e.clientX 和 e.clientY 语句 确定 鼠标 位 置 ， 并 动态 调整 图 片 位 置 ， 从 
而 实现 图 片 的 移动 效果 。 在 正 9.0 中 浏览 效果 如 图 20-27 所 示 , 可 以 看 到 鼠标 在 页 面 中 移动 时 ， 
片 也 跟着 移动 。 


精 殉 HTML-+CSS 网 页 布局 与 样式 (视频 教学 版 ) 


ae | 闻 ENBHTML+ CS ~ 0 X | 匡 二 S53 二 


图 20-27 最 终 效 果 
20.10 ”综合 实例 8 一 一 树 形 菜单 
网 站 首页 的 特点 之 一 是 需要 导航 的 页 面 很 多 ,有 时 不 得 不 将 所 有 需要 导航 的 部 分 都 放 到 一 
个 导航 菜单 中 。 树 形 导航 菜单 是 网 页 设计 中 最 常用 的 菜单 之 一 。 本 实例 将 创建 一 个 树 形 菜单 ， 
具体 步骤 如 下 所 示 。 
(0 和 分 析 需 求 。 
要 实现 一 个 树 形 菜单 ， 需 要 三 个 方面 配合 ， 一 个 是 <ul> 无 序列 表 ， 用 于 显示 的 菜单 ， 一 个 


是 CSS 样式 ， 用 于 修饰 树 形 菜单 样式 ， 一 个 是 JavaScript 程序 ， 用 于 实现 单 击 鼠 标 时 展开 菜 
单 选项 。 实 例 完成 后 ， 效 果 如 图 20-28 所 示 。 


SR [le 
A je EENHTML+CSS D - OX | SG =n “| Wa 
文件 (有) 妨 强 (5) 下 看 (V) 收藏 闪 ( 和 工具 (T) 帮助 0H) 


计划 机 图 书 


图 20-28 树 形 菜单 
to3 创建 HTML 页 面 ， 实 现 菜单 列表 。 


<html > 
<head> 
<title> 树 形 菜单 </tile> 
</head> 
<body> 
<ul id="menu zzjs_net"> 
<li> 
<label><a href="javascript::"> 计 算 机 图 书 </a></label> 
<ul class="two"> 
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<li> 
<label><a href="javascript::"> 程 序 类 图 书 </a></label> 
<ul class="two"> 
<l> 
<label><input type="checkbox" value="123456"><a hre 全 "javascript:">Java 类 图 书 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox” value="123456"><a hre 会 "javascript::">Java 语言 类 图 书 
</a></label></li> 
<l> 
<label><input type="checkbox" value="123456"><a href="javascript::">Java 框架 类 图 书 
</a></label> 
<ul class="two"> 
<li> 
<label><input type="checkbox" value="123456"><a href="javascript::">Struts2 图 书 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox" value="123456"><a href="javascript::">Struts1</a></label> 
</> 
<li><label><input type="checkbox" value="123456"><a href="javascript::">Struts2</a></label> 
</> 
</ul> 
</> 
<li><label><input type="checkbox" value="123456"><a href="javascript::">Hibernate 入 门 
</a></label></li> 
</ul> 
</> 
</ul> 
</> 
</ul> 
</> 
<li> 
<label><a href="javascript::"> 设 计 类 图 书 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox” value="123456"><a hre 人 "javascript::">PS 实例 大 全 </a></label> 
</l> 
<li><label><input type="checkbox” value="123456"><a hre 人 "javascript:">Flash 基础 入 门 </a> 
</label></l> 
</u> 
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</html> 


在 正 9.0 中 浏览 效果 如 图 20-29 所 示 ， 可 以 看 到 无 序列 表 在 页 面 上 显示 ， 并 且 显 示 全 部 元 
素 ， 字 体 颜色 为 蓝 色 。 


图 20-29 无 序列 表 
i03j 添加 JavaScript 代码 ， 实 现 单 击发 鼠标 展开 菜单 。 


<script type="text/javascript" > 
function addEvent(el,name.fn){// 绑 定 事件 
if(el.addEventListener) return el.addEventListener(name,.fn.false): 
return el.attachEvent('‘on'+name.fn): 
} 
function nextnode(node){/ 寻 找 下 一 个 兄弟 并 剔除 空 的 文本 节点 
这 Inode) return ; 
if(node.nodeType == 1) 
return node; 
if(node.nextSibling) 
return nextnode(node.nextSibling): 
} 
function prevnodetnode){/ 寻 找 上 一 个 兄弟 并 剔除 空 的 文本 节点 
这 !node) returm : 
这 node.nodeType 一 1) 
return node: 
if(node.previousSibling) 
return prevnode(node.previousSibling): 
} 
function parcheck(self.checked){// 递 归 寻 找 父 亲 元 素 ， 并 找到 input 元 素 进行 操作 
var par = prevnode(self.parentNode.parentNode.parentNode.previousSibling).parspar: 
if(par&- Separ.getElementsByTagName('input )[O]){ 
par.getElementsByTagName(input)[0].checked = checked: 
parcheck(par.getElementsByTagName(input)[0].sibcheck(par.getElementsByTagName(input)[0])): 
} 
} 
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function sibcheck(selb{/ 判 断 兄 弟 节点 是 否 已 经 全 部 选中 
var sbi = self.parentNode.parentNode.parentNode.childNodes.n=0: 
for(var i=0:i<sbi.length:it+){ 
这 sbi[i].nodeType != 1)// 由 于 孩子 结 点 中 包括 空 的 文本 节点 ， 所 以 这 里 累计 长 度 时 也 要 算 上 
ntt; 
else ifsbifil.getElementsByTagName(input)[0].checked) 
ntt; 
} 
Teturn n==sbi.length?true:false: 


addEvent(document.getElementById('menu_zzjs_net").'click',function(e){// 绑 定 input 点 击 事件 ， 使 用 


menu_zzjs_net 根 元 素 代理 
e= ellwindow.event; 
Var target = e.targetlle.srcElement: 
var tp = nextnode(target.parentNode.nextSibling):; 
switch(target.nodeName){ 
case 'A':// 点 击 A 标签 展开 和 收缩 树 形 目 录 ， 并 改变 其 样式 
if(tp&&tp.nodeName =—= "UL'"){ 
if(tp.style.display != 'block’ ){ 
tp.style.display = "block': 
prevnode(target.parentNode.previousSibling).className = Ten' 
}else{ 
tp.style.display = ‘none'; 
prevnode(target.parentNode.previousSibling).className = 'add' 


; 


break: 
case 'SPAN':// 点 击 图 标 只 展开 或 者 收缩 树 形 目录 
Var ap = nextnode(nextnode(target.nextSibling).nextSibling): 
if(ap.style.display != 'block’ ){ 
ap.style.display = 'block’; 
target.className = Ten' 
}else{ 
ap.style.display = ‘none'; 
target.className = 'add' 
. 
break: 
case INPUT'// 点 击 checkbox， 选 中 父亲 元 素 ， 则 孩子 节点 中 的 checkbox 也 同时 被 选中 ， 孩 子 结 点 取 
消 父 元 素 也 随 之 取消 
if(target.checked){ 
这 tp){ 
Var checkbox = tp.getElementsByTagName(input): 
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for(var 0:i<checkbox.length:i++) 
checkbox[i].checked = tme: 
jelse{ 
这 tp){ 
Var checkbox = 印 .getElementsByTagName(input): 
for(var i=0:i<checkbox.length:i++) 
checkbox[i].checked = false: 
} 
8 
Parcheck(target,sibcheck(target));// 当 孩子 结 点 取消 选中 的 时 候 , 调用 该 方法 递归 其 父 节 点 的 checkbox 
逐一 取消 选中 
break:; 
} 
D; 
window.onload = fonctionO{/ 页 面 加 载 时 给 有 孩子 结 点 的 元 素 动态 添加 图 标 
var labels = document getElementById(menu _zzjs_net).getElementsByTagName(label): 
for(var 二 0:i<labels.length:i++H){ 
Var span = document.createElement('span'"): 
span.style.cssText ='display:inline-block:height:18px:Vertical-align:middle:width:16px:cursor:pointer: 
span.innerHTML ="" 
span.className = 'add'; 
if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName =— 'UL') 
labels[i].parentNode.insertBefore(span,labels[i]): 
else 
labels[i].className = 'rem' 
} 
} 
</script> 


在 焉 9.0 中 浏览 效果 如 图 20-30 所 示 , 可 以 看 到 无 序列 表 在 页 面 上 显示 , 使 用 鼠标 单 击 可 
以 展开 或 关闭 相应 的 选项 ， 但 其 样式 非常 难看 。 


pF - 
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20-30 ”实现 鼠标 单 击 事件 
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to 弥 添加 CSS 代码 ， 修 饰 列表 选项 。 


<style type="text/css"> 

body {margin:0:padding:0:font:12px/1.5 Tahoma.Helvetica.Arial,sans-serif} 
ul,li, {margin:0;padding:0;} 

ul{list-style:none:} 

#menu zzjs_net{margin:10px:width:200px:overflow:hidden:} 

#menu zzjs_net li{line-height:25px:} 

#menu zzjs_net rem{padding-left:16px:} 

#menu zzjs_net .add{background:url() -4px -31px no-repeat:} 

#menu zzjs_net .ren{background:url() -4px -7px no-repeat:} 

#menu zzjs_net li a{color:#666666:padding-left:5px:outline:none:blr:expression(this.onFocus=this.blurO);} 
#menu zzjs_net li input{vertical-align:middle:margin-left:5px:} 

#menu zzjs_net .two{padding-left:20px:display:none:} 

</style> 


在 正 9.0 中 浏览 效果 如 图 20-31 所 示 ， 可 以 看 到 与 原来 的 页 面相 比 ， 菜 单 样式 更 加 漂亮 。 


司 EA 二 要 4TML-CSSR Dv CX EE 
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图 20-31 最 终 效果 
20.11 综合 实例 9 一 一 颜色 选择 器 


在 页 面 中 定义 背景 色 和 字体 颜色 是 常见 的 一 种 操作 , 而 在 选取 颜色 时 会 比较 发 悉 , 不 知道 
哪 种 颜色 适合 ， 并 且 也 不 知道 颜色 值 。 此 时 可 以 利用 颜色 选择 器 来 定义 颜色 并 获取 颜色 值 。 本 
实例 将 创建 一 个 颜色 选择 器 ， 具 体 步骤 如 下 所 示 。 


本 实例 原理 非常 简单 ， 就 是 将 几 个 常用 的 的 颜色 值 进行 组 合 ,组合 在 一 起 后 合并 ， 就 是 所 
要 选择 的 颜色 值 。 这 些 都 是 利用 JS 代码 完成 的 。 实 例 完 成 后 ， 效 果 如 图 20-32 所 示 。 
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图 20-32 ” 设 定 页 面 背景 色 
to3 创建 基本 HTML 页 面 。 


<html> 
<head><title> 背 景色 选择 器 </title> 
</head> 

<body bgcolor="#FFFFFF"> 
</body></html> 


上 述 代 码 比较 简单 ， 只 实现 了 一 个 页 面 框架 。 
03) 添加 JavaScript 代码 ， 实 现 颜 色 选 择 。 


<script language="JavaScript"> 

<!-- 

Var hex = new Array(6) 

hex[0] = "FF" 

hex[1] = "CC" 

hex[2] = "99" 

hex[3] = "66" 

hex[4] = "33" 

hex[5] = "00" 

function display(triplet) 

4 
document.bgColor = '# + triplet 
alert(' 现 在 的 背景 色 是 #+triplet) 

} 

function drawCell(red, green, blue) 

{ 
document.write(<TD BGCOLOR="# + red + green + blue + ">") 
document.write(<A HREF="javascript:display(\" + (red + green + blue) + \")">") 
document write(<IMG SRC="place.gif' BORDER=0 HEIGHT=12 WIDTH=12>') 
document.write('</A>') 
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document write(</TD>) 
} 
function drawRow(red, blue) 
{ 
document.write(‘<TR>") 
for (vari=0;i<6; ++i) 
{ 
drawCell(red, hex[i]. blue) 
} document.write(</TR>) 
}function drawTable(blue) 
因 
document.write(<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>) 
for (vari=0;i<6;++i) 
drawRow(hex[i], blue) 
} 
document.write('</TABLE>'") 
} 
function drawCube() 
UL 
document.write(‘<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>) 
for(vari=0:i<6:++H) 
| 
document.write(<TD BGCOLOR="#EFFFFFF">) 
drawTable(hex[i]) 
document.write(</TD>) 
} documentwrite('</TR></TABLE>) 
}drawCube() 
/| --></script> 


在 上 面 的 代码 中 , 创建 了 一 个 数组 对 象 hex 用 来 存放 不 同 的 颜色 值 。 下面 几 个 函数 分 别 将 


数组 中 颜色 组 合 在 一 起 ， 并 在 页 面 显示 ，display 函数 完成 背景 颜色 的 定义 并 显示 颜色 值 。 
在 正 9.0 中 浏览 效果 如 图 20-33 所 示 ， 可 以 看 到 页 面 中 显示 多 个 表格 ， 每 个 单元 格 代表 一 种 颜色 。 
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图 20-33 ”最 终 效果 
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20.12 ”专家 解 惑 


1. JavaScript 的 数组 中 常用 的 方法 有 哪些 ? 
@ jion() 将 array 中 的 所 有 element 以 string 的 形式 连 在 一 起 


var a= [1,2,3]; 
s= a.joinO:; l/s="1,2,3" 
s=ajoin(": "); //s="1:2:3" 


@ reverse() ”将 数组 中 的 元 素 顺序 颠倒 


var a= [1,2,3]; 
a.reverse(); 
s=a.joinQ;//s = "3,2,1" 


@ sort() ”排序 ， 默 认 按 字母 顺序 排序 ， 区 分 大 小 写 ， 可 以 自 定义 排序 方式 . 


var a= [111,4,33,2]; 
a.sort0; //a==[111,2,33,4] 
a.sort(function(a,b) { //a 一 [2.4,33,111] 
return a-b: /Retums<0.0.or>0 
D; 
@ concat() 连接 多 个 数组 


var a= [1,2,3]; 

a.concat(4,5): /retum [1,2,3.,4,5] 
a.concat([4.5]): // return [1,.2.3.4.5] 
a.concat([4,5], [6.7]) //return [1.2.3.4.5.6.7] 
aconcat(4.[5.[6.7]]): // return [1.2.3.4.5.6.7] 


2. JavaScript 中 的 注释 有 哪些 ? 
可 以 在 程序 中 添加 注释 来 描述 代码 的 功能 , 通过 注释 还 可 以 使 一 些 代 码 无 效 , 以 便 逐 行 检 
查 程序 ， 及 时 发 现 并 解决 问题 。JavaScript 主要 提供 了 3 种 注释 的 方法 : 
@ 单行 注释 : 在 需要 注释 的 代码 前 添加 字符 "//"，// 后 面 的 部 分 会 被 注释 。 
@ 多 行 注释 : 在 需要 注释 代码 前 添加 "/*", 之 后 添加 "*/", 两 个 符号 之 间 的 部 分 会 被 注释 。 
@ HTML 注释 : 使 用 传统 的 HTML 注释 ，<!-- 和 --> 之 间 的 部 分 会 被 注释 ， 注 释 内 容 可 以 
为 一 行 或 多 行 。 


第 21 章 
< CSS 与 XML 的 综合 运用 > 


XML 是 一 种 标准 化 的 文本 格式 , 可 以 在 Web 上 表示 结构 化 信息 , 利用 它 可 以 存储 有 复杂 
结构 的 数据 信息 。XML 是 HTML 的 补充 , 但 XML 并 不 是 HTML 的 蔡 代 品 。 在 将 来 的 网 页 开 
发 中 ，XML 将 被 用 来 描述 和 存储 数据 ， 而 HTML 则 用 来 格式 化 和 显示 数据 。 


21.1 XML 语法 基础 


XML 是 标记 语言 , 支持 开发 者 为 Web 信息 设计 自己 的 标记 。 XML 要 比 HTML 强大 得 多 ， 
它 不 再 是 固定 的 标记 , 而 是 允许 定义 数量 不 限 的 标记 来 描述 文档 中 的 资料 ,允许 嵌 套 的 信息 结 
构 。 


21.1.1 XML 概念 


随 着 因特网 的 发 展 ， 为 了 控制 网 页 显示 样式 ， 增 加 了 一 些 描述 如 何 显示 数据 的 标记 ， 如 
<center>、<b> 等 标记 。 但 随 着 HTML 的 不 断 发 展 ，W3C 组 织 逐 渐 意识 到 HTML 存在 一 些 无 
法 避免 的 问题 。 


@ 不 能 解决 所 有 解释 数据 的 问题 如 影音 文件 或 化 学 公式 、 音 乐 符号 等 其 他 形式 的 内 容 。 
@ 效能 问题 ， 需 要 下 载 整 份 文件 才能 开始 对 文件 做 搜寻 的 动作 。 
@ 扩充 性 、 弹 性 、 吻 读 性 均 不 佳 。 


为 了 解决 以 上 问题 ， 专 家 们 依照 HTML 的 发 展 规律 ， 制 定 出 一 套 规则 严谨 但 是 语法 简单 
的 描述 数据 语言 ， XML。 

XML (eXtensible Markup Language, 可 扩展 标记 语言 ) 是 W3C 推荐 的 参考 通用 标记 语言 ， 
同样 也 是 SGML 的 子 类 ， 可 以 定义 自己 的 一 组 标记 。 它 具有 下 面 几 个 特点 。 


@ XML 是 一 种 元 标记 语言 ， 所 谓 “ 元 标记 语言 ”就 是 开发 者 可 以 根据 需要 定义 自己 的 标 
记 ， 例 如 开发 者 可 以 定义 标记 <book>、<name>， 任 何 满足 XML 命名 规则 的 名 称 都 可 
以 作为 标记 ， 这 就 为 不 同 应 用 程序 的 应 用 打开 了 大 门 。 

@ 允许 通过 使 用 自 定义 格式 ， 标 识 、 交 换 和 处 理 数 据 库 可 以 理解 的 数据 。 

@ 基于 文本 的 格式 ， 允 许 开发 人 员 描 述 结构 化 数据 并 在 各 种 应 用 之 间 发 送 和 交换 这 些 数 
据 。 
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@ 有 助 于 在 服务 器 之 间 传 输 结 构 化 数据 。 
@ XML 使 用 的 是 非 专 有 的 格式 ， 不 受 版 权 、 专 利 、 商 业 秘密 或 是 其 他 类 型 的 知识 产权 的 
限制 。 


XML 的 功能 是 非常 强大 的 ， 同 时 对 于 人 类 或 是 计算 机 程序 来 说 ， 都 容易 阅读 和 编写 。 因 
而 XML 成 为 交换 语言 的 首选 。 网 络 的 最 大 好 处 是 信息 共享 ， 在 不 同 的 计算 机 中 发 送 数据 ， 而 
XML 用 来 告诉 我 们 “数据 是 什么 ”， 利 用 XML 可 以 在 网 络 上 交换 任何 一 种 信息 。 

【 例 21.1】 “实例 文件 :ch21\21.1.xml) 


<?xml version="1.0" encoding="GB2312" ?> 
< 电器 > 
< 家 用 电器 > 
< 品牌 > 小 天 鹅 洗衣 机 </ 品 牌 > 
< 购买 时 间 >2009-10-01</ 购 买 时 间 > 
< 价格 币 种 =" 人 民 币 ">899 元 </ 价 格 > 
</ 家 用 电器 > 
< 家 用 电器 > 
< 品牌 > 海尔 冰箱 </ 品 牌 > 
< 购买 时 间 >2011-08-16</ 购 买 时 间 > 
< 价格 币 种 =" 人 民 币 ">3990</ 价 格 > 
</ 家 用 电器 > 
</ 电 器 > 
此 处 需要 将 文件 保存 为 XML 文件 。 该 文件 中 ， 每 个 标记 都 是 用 汉语 编写 的 ， 是 自 定义 标 
记 。 可 以 将 电器 看 做 一 个 对 象 , 该 对 象 包含 了 多 个 家 用 电器 ,家 用 电器 是 用 来 存储 电器 的 相关 
信息 的 ， 也 可 以 说 家 用 电器 对 象 是 一 种 数据 结构 模型 。 在 页 面 中 没有 对 数据 的 样式 进行 修饰 ， 
而 只 告诉 我 们 数据 结构 是 什么 ， 数 据 是 什么 。 
在 IE 9.0 中 浏览 效果 如 图 21-1 所 示 ， 可 以 看 到 整个 页 面 以 树 形 结构 显示 ， 通 过 单 击 “-” 
可 以 关闭 整个 树 形 结构 ， 单 击 “+” 可 以 展开 树 形 结构 。 


四 ENHTMttcss P - OX | GB erin cssn.. x | ea 
文件 (月 ”六 名 (E) 。 豆 看 (V) 履 茂 闪 {A) 工具 (T) 大 去 (H) 


<?xml version="1.0" encoding="GB2312"?> 
~ < 电器 > 
~ < 家 用 电器 > 
< 品牌 > 小 天 萝 洗 衣 机 </ 品 牌 > 
< 购买 时 间 >2009-10-01</ 购 买 时 间 > 
< 价格 币 种 =" 人 民 币 ">899 元 </ 价 格 > 


< 品牌 > 海尔 冰箱 </ 品 牌 > 
< 购买 时 间 >2011-08-16</ 购 买 时 间 > 
< 价格 币 种 =" 人 民 币 ">3990</ 价 格 > 
</ 家 用 电器 > 
</ 电 器 > 


图 21-1 XML 文件 显示 
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21.1.2 XML 文档 的 组 成 和 声明 


一 个 完整 的 XML 文档 由 声明 、 元 素 、 注 释 、 字 符 引用 和 处 理 指令 组 成 。 在 文档 中 ， 所 有 
这 些 XML 文档 的 组 成 部 分 都 是 通过 元 素 标记 来 指明 的 。 可 以 将 XML 文档 分 为 3 个 部 分 ， 如 
图 21-2 所 示 。 


声明 和 
<?xml version="1.0" encoding="GB2312" 
> 


主体 < 公司 员工 > 
EE 刘 红 起 </ 姓 名 > 


> 女 </ 性 别 > 
0 
< 公司 员 


图 21-2 XML 文档 组 成 


XML 声明 必须 作为 XML 文档 的 第 一 行 ， 前 面 不 能 有 空白 、 注 释 或 其 他 处 理 指令 。 完 整 
的 声明 格式 如 下 : 


<?xml version="1.0" encoding=" 编 码 " standalone="yes/no" ?> 


其 中 version 属性 不 能 省 略 ， 且 必须 排 在 属性 列表 中 的 第 一 位 ， 指 明 所 采用 的 XML 版 本 
号 ， 值 为 1.0。 该 属性 用 来 保证 对 XML 未 来 版 本 的 支持 。encoding 属性 是 可 选 属性 。 该 属性 
指定 了 文档 采用 的 编码 方式 ， 即 规定 了 采用 哪 种 字符 集 对 XML 文档 进行 字符 编码 ， 常 用 的 编 
码 方式 为 UTF-8 和 GB2312。 如 果 没 有 使 用 encoding 属性 ,那么 该 属性 的 默认 值 是 UTF-8， 如 
果 encoding 属性 值 设置 为 GB2312， 则 文档 必须 使 用 ANSI 编码 保存 ， 文 档 的 标记 以 及 标记 内 
容 只 能 使 用 ASCII 字符 和 中 文 。 

使 用 GB2312 编码 的 XML 声明 如 下 : 


<?xml version="1.0" encoding="GB2312" ?> 


XML 文档 主体 必须 有 根 元 素 。 所 有 的 XML 必须 包含 可 定义 根 元 素 的 单一 标记 对 。 所 有 
其 他 的 元 素 都 必须 处 于 这 个 根 元 素 内 部 。 所 有 的 元 素 均 可 拥有 子 元 素 。 子 元 素 必须 被 正确 地 嵌 
套 于 它们 的 父 元 素 内 部 。 根 标记 以 及 根 标记 内 容 共 同 构成 XML 文档 主体 。 没 有 文档 主体 的 
XML 文档 将 不 会 被 浏览 器 或 其 他 XML 处 理 程序 所 识别 。 

注释 可 以 提高 文档 的 阅读 性 ， 尽 管 XML 解析 器 通常 会 忽略 文档 中 的 注释 ， 但 位 置 适当 且 
有 意义 的 注释 可 以 大 大 提高 文档 的 可 读 性 。 所 以 XML 文档 中 不 用 于 描述 数据 的 内 容 都 可 以 包 
含 在 注释 中 ， 注 释 以 “<!--” 开 始 ， 以 “-->” 结 束 ， 在 起 始 符 和 结束 符 之 间 为 注释 内 容 ， 注 释 
内 容 中 可 以 输入 符合 注释 规则 的 任何 字符 串 。 
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【 例 21.2】 《实例 文件 ， ch21\21.2.xml) 


<?xml version="1.0" encoding="gb2312"2> 
<!-- 这 是 一 个 优秀 学 生 名 单 -> 
< 学 生 名 单 > 
< 学 生 > 
< 姓名 > 张 三 </ 姓 名 > 
< 学 号 >21</ 学 号 > 
< 性 别 > 男 </ 性 别 > 
</ 学 生 > 
< 学 生 > 
< 姓名 > 李 四 </ 姓 名 > 
< 学 号 >22</ 学 号 > 
< 性 别 > 女 </ 性 别 > 
</ 学 生 > 
</ 学 生 名 单 > 


在 上 面 的 代码 中 ， 第 一 句 代码 是 一 个 XML 声明 。 Fitter ga 
的 子 元 素 ， 而 “< 姓名 >” 标 记 和 “< 学 号 >” 标 记 是 “< 学 生 >” 标 记 的 子 元 素 。“<! 一 这 是 一 
个 优秀 学 生 名 单 -->” 是 一 个 注释 。 

在 下 9.0 中 浏览 效果 如 图 21-3 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 树 形 结构 ， 并 且 数 据 层 
次 感 非常 好 。 


| 文 #( 有 六 声 (E) 下 看 (V) ” 故 二 交 (A) 工具 (D) 帮 动 (H) 


ncoding="GB2312"?> 
单 --> 


> 
< 姓名 > 张 三 </ 姓 名 > 
< 学 号 >21</ 学 号 > 
< 性 别 > 男 </ 性 别 > 

</ 学 生 > 

= 志 学 生 > 

< 姓名 > 李 四 </ 姓 名 > 

< 学 号 >22</ 学 号 > 

< 性 别 > 女 </ 性 别 > 


</ 学 生 > 
</ 学 生 名 单 > 


图 21-3 XML 文档 的 组 成 


21.1.3 XML 元 素 介绍 
元 素 是 以 树 形 分 层 结构 排列 的 ， 它 可 以 嵌 套 在 其 他 元 素 中 。 
1. 元 素 类 别 
在 XML 文档 中 ， 元 素 也 分 为 非 空 元 素 和 空 元 素 两 种 类 型 。 一 个 XML 非 空 元 素 是 由 开始 
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标记 、 结 束 标记 以 及 标记 之 间 的 数据 构成 的 。 开 始 标 记 和 结束 标记 用 来 描述 标记 之 间 的 数据 。 
标记 之 间 的 数据 被 认为 是 元 素 的 值 。 非 空 元 素 的 语法 结构 如 下 所 示 : 


< 开始 标记 > 文本 内 容 </ 结 束 标记 > 

而 空 元 素 就 是 不 包含 任何 内 容 的 元 素 , 即 开始 标记 和 结束 标记 之 间 没 有 任何 内 容 。 其 语法 
结构 如 下 所 示 : 

< 开始 标记 ></ 结 束 标记 > 

可 以 把 元 素 内 容 为 文本 的 非 空 元 素 转换 为 空 元 素 。 例 如 ， 

<hello> 下 午 好 </hello> 


<hello> 是 一 个 非 空 元 素 ， 如 果 把 非 空 元 素 的 文本 内 容 转换 为 空 元 素 的 属性 ， 那 么 转换 后 
的 空 元 素 可 以 写 为 。 

<hello content= "下午 好 "></hello> 

2. 元 素 命名 规范 

XML 元 素 命名 规则 与 Java、C 等 命名 规则 类 似 ， 它 也 是 一 种 对 大 小 写 敏感 的 语言 。XML 
元 素 的 命名 必须 遵守 下 列 规则 : 

@ 元 素 名 中 可 以 包含 字母 、 数 字 和 其 他 字符 。 

如 <place>、< 地 点 >、<no123> 等 。 元 素 名 中 虽然 可 以 包含 中 文 , 但 是 在 不 支持 中 文 的 环境 
中 将 不 能 解释 包含 中 文字 符 的 XML 文档 。 


@ 元 素 名 中 不 能 以 数字 或 标点 符号 开头 ， 如 <123no>、<.name>、<?error> 元 素 名 称 都 是 
非法 名 称 。 
@ 元 素 名 中 不 能 包含 空格 ， 如 <no 123>。 


3 元素 典 套 
元 素 的 内 容 可 以 包含 子 元 素 。 子 元 素 本 身 也 是 元 素 ,被 嵌 套 在 上 层 元 素 之 内 。 如 果子 元 素 
嵌 套 了 其 他 元 素 ， 那 么 它 同时 也 是 父 元 素 ， 例 如 下 面 的 代码 所 示 : 


<2xml version="1.0" encoding="gb2312" ?> 
<students> 
<student> 
<name> 张 三 </name> 
<age>20</age> 
</student> 


</students> 
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<student> 是 <students> 的 子 元 素 ， 同 时 也 是 <name> 和 <age> 的 父 元 素 ， 而 <name> 和 <age> 
是 <student> 的 子 元 素 。 


4. 元 素 实例 
【 例 21.3】 实例 文件 :ch2121.3.xml) 


<?xml version="1.0" encodine="gb2312" ?> 
< 通讯 录 > 
<!--" 记 录 "标记 中 包含 姓名 、 地 址 、 电 话 和 电子 邮件 --> 
< 记录 date="2011/2/1"> 
< 姓名 > 张 三 </ 姓 名 > 
< 地 址 > 中 州 大 道 1 号 </ 地 址 > 
< 电话 >0371-12345678</ 电 话 > 
< 电子 邮件 >rose@tom.com</ 电 子 邮 件 > 
</ 记 录 > 
< 记录 date="2011/3/12"> 
< 姓名 > 李 四 </ 姓 名 > 
< 地 址 > 邯郸 市 工农 大 道 2 号 </ 地 址 > 
< 电话 >123456</ 电 话 > 
</ 记 录 > 
< 记录 date="2011/6/23"> 
< 姓名 > 闫 阳 </ 姓 名 > 
< 地 址 > 长 春 市 幸福 路 6 号 </ 地 址 > 
< 电话 >0431-123456</ 电 话 > 
< 电子 邮件 >yy@sina.com</ 电 子 邮 件 > 
</ 记 录 > 
</ 通 讯 录 > 
在 上 面 的 代码 中 ， 第 一 行 是 XML 声明 ， 它 声明 该 文档 是 XML 文档 ， 并 声明 文档 所 遵守 
的 版 本 号 以 及 文档 使 用 的 字符 编码 集 。 在 这 个 例子 中 ， 遵 守 的 是 XML 1.0 版 本 规范 ， 字 符 编 
码 是 GB2312 编码 方式 。< 记 录 > 是 < 通讯 录 > 的 子 标 记 ， 但 < 记录 > 标记 同时 是 < 姓名 > 和 < 地 址 > 
等 标记 的 父 元 素 。 
在 下 9.0 中 浏览 效果 如 图 21-4 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 树 形 结构 ， 每 个 标记 中 
间 包 含 相应 的 数据 。 
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< 地 址 : /地 | 
< 电话 >0371-12345678</ 电 话 > 
< 电子 邮 宦 >rose@tom.com </ 电 子 邮件 > 


</ 记 录 > 
- < 记录 date="2011/3/12"> 


</ 记 录 > 
- < 记录 date="2011/6/23'"> 
< 姓名 > 间 阳 </ 此 鱼 > 
< 地 址 > 长春 市 幸福 效 6 号 =/ 地 址 > 
< 电话 >0431-123456</ 电 话 > 
< 电子 邮 第 >yy@sina-com</ 电 子 则 件 > 
</ 记 录 > 


图 21-4 元 素 包含 
21.2 使 用 CSS 修饰 XML 文件 


我 们 知道 XML 文档 本 身 只 包含 数据 , 而 没有 关于 显示 数据 样式 的 信息 。 如果 需 要 将 XML 
文档 数据 美观 的 显示 出 来 ， 而 不 是 以 树 形 结 构 显 示 ， 可 以 通过 CSS 来 控制 XML 文档 中 各 个 
元 素 的 呈现 方式 。 


21.2.1 在 XML 文件 中 使 用 CSS 


XML 文档 数据 需要 使 用 CSS 属性 定义 显示 样式 ， 其 方法 是 把 CSS 代码 做 成 独立 的 文件 ， 
然后 引入 到 XML 中 。 在 XML 文档 中 引入 样式 表 CSS， 可 以 将 数据 的 内 容 和 表示 分 离 出 来 ， 
并 且 能 够 实现 CSS 的 重复 使 用 。 

要 在 XML 文件 中 引用 CSS 文件 ， 必 须 使 用 下 面 的 操作 指令 : 


<?xml-stylesheet href="URI" type="text/css"?> 


xml-stylesheet 表示 在 这 里 使 用 了 样式 表 。 样 式 表 的 URI 表示 要 引入 文件 所 在 的 路 径 ， 如 
果 只 是 一 个 文件 的 名 字 ， 该 CSS 文件 必须 和 XML 文档 同 在 一 个 目录 下 ; 如 果 URI 是 一 个 链 
接 ， 该 链接 必须 是 有 效 的 、 可 访问 的 ，type 表示 该 文件 所 属 的 类 型 是 文本 形式 的 ， 其 内 容 是 
CSS 代码 。 

【 例 21.4】 《实例 文件 ，ch21\21.4.xml) 


<2xml version="1.0" encoding="GB2312" ?> 
<?xml-stylesheet type="text/css" href—="20.4.css"?> 
<student> 

<name> 孙 福全 </name> 

<sex> 男 </sex> 

<name> 王 小 玲 </name> 

<sex> 女 </sex> 
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</student> 
【 例 21.5】〔 实 例文 件 ，ch2121.4.css) 


student{ 
background-color: #ddeecc: 
font-family:" 幼 圆 "…: 
text-align:center: 
display:block: 

上 

name{ 
font-size:20px:; 
color:red; 

} 

sex{ 
font-size:12px: 
font-style:italic: 

} 


在 CSS 文件 中 ， 针 对 student、name 和 sex 3 个 标记 ， 设 置 了 不 同 的 显示 样式 ， 如 字体 大 
小 、 字 体 颜 色 、 对 齐 方式 等 。 

在 正 9.0 中 浏览 效果 如 图 21-5 所 示 ， 可 以 看 到 XML 文档 不 再 以 树 形 结构 显示 ， 并 且 没 
有 标记 出 现 ， 只 是 显示 其 标记 中 数据 。 


四 HAUsersAdminis PD - © X | @ HAuserswAdministr.，x 


文件 (月 ” 蝙 强 (E) 下 看 (V) 收藏 闪 (A) 工具 (T) 帮助 (H) 


孙 福 全 罗 王 小 玲 六 


图 21-5 在 XML 文件 中 引入 CSS 文件 
21.2.2 设置 字体 属性 
CSS 样式 表 则 提供 了 多 种 字体 属性 ， 便 于 设计 者 对 字 进 行 详细 的 设置 ， 从 而 丰富 页 面 效 
果 。 例 如 font-style、font-variant、font-weight、font-size 和 font-family 等 属性 ， 这 些 属性 前 面 
已 经 介绍 过 ， 这 里 不 再 资 述 。 这 些 字体 属性 也 可 以 应 用 于 XML 文件 元 素 。 
【 例 21.6】〔 实 例文 件 : ch21\21.5.xml) 


<?xml version="1.0" encoding="gb2312"?> 
<?xml-stylesheet href="20.5.css" type="text/css"?> 
<company> 

<name> 水 月 网 页 设计 工作 室 </name> 
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<address> 郑 州 市 花园 路 松 风 大 夏 </address> 
<phone>13012345678</phone> 
</company> 


【 例 21.7】〔 实 例文 件 ，ch21W21.5.css) 


company{ 
color: #ddeecc:; 
font:normal small-caps bolder 15pt " 幼 圆 " : 
background-color:#123543 


name{ 
font-size:30px; 
display:block: 


address{ 
font-size: 12px; 
display:block: 


phone{ 
font-size: 12px:; 
font-style:italic:; 
display:block: 

} 


上 面 的 CSS 代码 ， 针 对 XML 中 的 标记 进行 了 字体 设置 、 背 景 颜色 和 前 景色 设置 。 
在 正 9.0 中 浏览 效果 如 图 21-6 所 示 ， 可 以 看 到 网 页 中 显示 了 一 个 公司 介绍 信息 ， 其 中 字 
体 大 小 不 一 样 ， 联 系 方式 以 斜体 显示 。 


[e-em 
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水 月 网 页 设计 工作 室 


图 21-6 使 用 CSS 定义 XML 字体 属性 


21.2.3 ”设置 色彩 属性 


颜色 和 背景 是 网 页 设计 时 两 个 重要 的 因素 , 一 个 颜色 搭配 协调 、 背景 优美 的 文档 总 能 吸引 
不 少 的 访问 者 。CSS 的 强大 表现 功能 在 控制 颜色 和 背景 方面 同样 发 挥 得 淋漓 尽 致 。XML 元 素 
的 背景 可 设置 成 一 种 颜色 或 一 幅 影 像 。 
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在 CSS 中 ， 如 果 需 要 设置 文本 颜色 ， 即 网 页 前 景色 ， 通 常 使 用 color 属性 ， 定 义 元 素 背景 
时 ， 其 相关 属性 分 别 如 下 : background-color 、background-image 、 background-repeat 、 
background-attachment、background-position。 这 些 前 面 都 已 经 介绍 过 ， 这 里 不 再 榴 述 。 

【 例 21.8】〔 实 例文 件 ，ch2121.6.xml) 


<?xml version="1.0" encoding="GB2312" ?> 
<?xml-stylesheet href="20.6.css" type="text/css" ?> 


</img> 
【 例 21.9】 实例 文件 :ch2121.6.css) 
img{ 
display:block: 
color:red:; 
text-align:center: 
font-size:40px: 
left:S0px: 
top:170px; 
background-image:URL("08.jpe"): 
background-repeat:no-repeat: 
background-position:left: 
} 
上 面 的 CSS 代码 设置 背景 以 块 显示 , 字体 颜色 为 红色 , 字体 大 小 为 40 像素 , 并 居中 显示 。 
background-image 引入 背景 图 片 为 08.jpg， 并 设置 了 图 片 不 重复 。 
在 正 9.0 中 浏览 效果 如 图 21-7 所 示 ， 可 以 看 到 页 面 背景 为 一 张 图 片 ， 且 不 重复 ， 在 图 片 
上 显示 了 “插花 ”， 颜 色 为 红色 。 


轴 HAUserswdminis DP » © X || 愿 buserswdministr 
文件 有” 闫 弓 (E)。 坦 看 (V) 。 履 宇 闪 (A) 工具 帮 
SN 员 


D2 


21-7 使 用 CSS 定义 XML 背景 
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21.2.4 设置 边框 属性 


在 CSS 中 可 以 使 用 border-style、border-width 和 border-color 这 3 个 属性 设 定 边框 。 页 面 
元 素 的 边框 就 是 将 元 素 内 容 及 间隙 包含 在 其 中 的 边线 , 类 似 于 表格 的 外 边线 。 页面 元 素 的 边框 
可 以 3 个 方面 来 描述 ， 即 宽度 、 样 式 和 颜色 ， 这 3 个 方面 决定 了 边框 所 显示 出 来 的 外 观 。 

【 例 21.10】“〈 实 例文 件 : ch21\21.7.xml) 


<?xml version="1.0" encodine="GB2312" ?> 
<?xml-stylesheet hre 伟 "20.7.css" type="text/css" ?> 
<Border> 
<smallBorder> 
学 校 雷 锋 好 榜样 
</smallBorder> 
</Border> 


【 例 21.11】 实 例文 件 ， ch21\21.7.css) 


Border{ 
border-style:solid: 
border-width: 15px: 
border-color:#123456; 
width:200px: 
height:150px: 
text-align:center: 

} 

smallBorder{ 
font-size:20px: 
color:red: 

} 


在 Border 标记 中 设置 边框 显示 样式 ， 例 如 直线 形 显示 ， 颜 色 为 深蓝 色 ， 宽 度 为 15 像素 ， 
并 且 设 置 显示 块 的 宽度 为 200 像素 ， 高 度 为 150 像素 ， 边 框 内 元 素 居 中 显示 。 在 smallBorder 
标记 中 设置 了 字体 大 小 和 字体 颜色 。 

在 正 9.0 中 浏览 效果 如 图 21-8 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 边框 ， 边 框 中 显示 的 是 
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| Hsers dminist P © x | Havsers adminise. 
文件 用” 奖 妆 (日 。 各 看 V) 。 次 宣 突 (内 工具 站 大 区 (H) 


图 21-8 设置 XML 元 素 的 边框 
21.2.5 设置 文本 属性 


在 CSS 中 ， 提 供 了 多 种 文本 属性 来 实现 对 文本 的 控制 ， 如 text-indent 属性 、text-align 属 
性 、white-space 属性 、line-height 属性 、vertical-align 属性 、text-transform 属性 和 text-decorati 
on 属性。 这 些 前 面 已 经 介绍 过 ,这 里 不 再 闭 述 。 利 用 上 面 这 些 属性 ， 可 以 控制 XML 元 素 的 显 
示 样 式 。 

【 例 21.12】 “实例 文件 : ch21\21.8.xml) 


<?xml version="1.0" encoding="gb2312"?> 

<?xml-stylesheet type="text/css" href="20.8.css"?> 

<big> 

<one> 健 康 </one> 

<two> 

<title> 饮 茶 养 生养 颜 特殊 时 期 慎 饮 茶 </title> 

<content> 

金银花 ， 味 甘 ， 性 寒 ， 具 有 清热 解毒 、 朴 散 风 热 的 作用 。 金 银 花 为 清热 解毒 之 良药 ， 既 能 清 里 热 ， 又 能 
散 表 热 ， 临 床上 主要 用 于 治疗 各 种 痛 肿 疮 毒 、 热 毒 血 痢 及 温 热 病 等 。 金 银 花 药性 偏 寒 ， 不 适合 长 期 饮用 ， 仅 
适合 在 炎热 的 夏季 暂时 饮用 以 防治 痢疾 。 

</content> 

</two> 

</big> 

【 例 21.13】〈 实 例文 件 : ch21\21.8.css) 


big{ 
width:500px: 
border:#6600FF 1px solid: 
height:200px: 
font-size:12px: 
font-family:" 幼 圆 "; 
} 


one{ 


上 面 的 CSS 代码 分 别 定义 了 不 同 标记 的 显示 样式 ， 如 宽度 、 高 度 、 边 框 样式 、 字 体 大 小 、 
行 高 和 是 否 带 有 下 划 线 等 。 

在 正 9.0 中 浏览 效果 如 图 21-9 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 公告 栏 ， 栏 中 显示 了 不 
同 颜色 的 字体 ， 并 且 段 落 缩 进 两 个 单元 格 显示 。 


图 21-9 修饰 XML 文本 
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21.3 综合 实战 1 一 一 招聘 广告 


CSS 结合 XML 文档 ， 可 以 创建 出 多 种 多 样 的 样式 ， 如 HTML 页 面 中 常见 的 招聘 信息 。 
本 实例 将 结合 前 面 学 习 的 XML 和 CSS 知识 ,创建 一 个 基于 XML 文档 的 招聘 广告 。 具 体 步 又 
如 下 所 示 。 

创建 一 个 招聘 广告 ， 就 文件 而 言 包括 两 个 大 部 分 ， 一 个 是 XML 文档 ， 一 个 是 CSS 文件 。 
XML 文档 需要 包含 招聘 标题 、 招 聘 内 容 和 联系 方式 ， 而 CSS 文件 需要 针对 XML 文档 标记 进 
行 样式 修饰 。 实 例 完成 后 ， 效 果 如 图 21-10 所 示 。 


招聘 广告 


因 公司 发 展 需要 . 


图 21-10 招聘 广告 显示 
03 构建 XML 文档 。 


<?xml version="1.0" encoding="GB2312" ?> 
<?xml-stylesheet hre 仁 "20.9.css" type="text/css" ?> 
<zhaopin> 
<title> 
招聘 广告 
</title> 
<content> 
因 公司 发 展 需要 ， 现 诚 聘 软 件 工程 师 3 名 。 
要 求 : 具有 Java 基础 ， 了 解 软件 设计 模式 ， 熟 练 掌握 Eclipse 工具 的 使 用 。 
</content> 
<address> 
联系 方式 :13012345678 
</address> 
</zhaopin> 
在 XML 文件 中 ， 有 一 个 根 标记 <zhaopin>， 下 面包 含 3 个 子 标记 ， 分 别 为 <tile> 标 记 、 
<content> 标 记 和 <address> 标 记 。 每 个 标记 中 分 别 存放 相应 的 数据 。 
在 下 9.0 中 浏览 效果 如 图 21-11 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 树 形 结构 ， 其 元 素 中 包 
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含 不 同 的 信息 。 


| 文件” 沂 扣 日 ”可 看 V) 不 太夫 A。 工具) 动人) 


<?xml version="1.0" enceding="GB2312"?> 
- <zhaopin> 
<title> 提 联 广告 </title> 
<content> 因 公 司 发 展 委 要 。 现 诚 聘 坎 件 工程 师 3 名 。 要求: 
具有 ]Java 和 基础， 了 解 软件 设计 标 式 ， 熟 条 笃 要 Eclipse 工 
具 使 用 。 </content> 
<addrass> 联系 方式 :13012345678 </address> 
</zhaopin> 


图 21-11 XML 文档 显示 
to3 添加 CSS 样式 文件 ， 修 饰 整体 样式 。 
zhaopin{ 
display:block: 
position:absolute; 
top:50px: 
left:50px: 
width:300px: 
height:300px: 
border:2px #ddeecc solid: 
text-align:center: 

} 


上 面 的 代码 定义 了 zhaopin 元 素 以 块 形式 显示 ， 使 用 绝对 定位 ， 坐 标 为 《50.50) ， 高 度 和 
宽度 都 是 300 像素 。 

在 下 9.0 中 浏览 效果 如 图 21-12 所 示 ， 可 以 看 到 页 面 不 再 以 树 形 结构 显示 ， 而 是 显示 一 个 
边框 ， 边 框 内 是 XML 文档 的 数据 。 


[全 二 站 Nuserswdminst P = Ox | 车 Huseswdmnisr- x 


文件 中 ”篇 二 (E) 至 看 VM) 。 履 重 六 (A) 工具 和 T 大 起 (H) 


[2 工程 师 3 名 。 要 求 ， 上 
而 ， 了 航 软 件 设计 模式 ， 训练 区 提 Eclipse 工 具 司 用 圈 系 方 
式 :13012345678 


Java 基 


图 21-12 定义 边框 样式 
to 绚 添加 CSS 样式 ， 修 饰 标题 、 内 容 和 地 址 信息 。 
title{ 

font-family: 黑 体 : 
font-varanit:normal: 
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font-size:S0pX: 
color:red: 
} 
content{ 
display:block: 
font-family:" 幼 圆 "…: 
font-varanit:normal; 
font-size:20px; 
color:blue: 
text-indent:2em; 
line-height:35px; 
有 
address{ 
position:absolute: 
left: 100px: 
top:260px; 
text-align:right: 
font-style:italic: 
} 


在 CSS 文件 中 ,针对 上 面 不 同 的 标记 ,设置 相应 的 样式 ， 如 修饰 字体 、 定 位 和 块 的 大 小 。 
在 正 9.0 中 浏览 效果 如 图 21-13 所 示 ， 可 以 看 到 页 面 边框 内 ， 标 题 以 红色 字体 显示 ， 正 文 


以 蓝 色 字 体 显示 ， 联 系 方式 以 斜体 显示 。 


图 21-13 最终 效果 


21.4 综合 实战 2 一 一 书目 清单 


在 网 页 中 ， 使 用 表格 显示 数据 是 最 常见 的 一 种 方式 ， 本 实例 将 使 用 XML 和 CSS 模拟 表 


格 效果 ， 创 建 一 个 书目 清单 。 具 体 步骤 如 下 所 示 。 
0 分 析 需 求 


CSS 与 XML 的 综合 运用 第 21 这 


创建 一 个 具有 表格 效果 的 页 面 ， 是 利用 元 素 的 边框 效果 完成 的 。 针 对 XML 标记 都 设 定 一 


个 边框 效果 ， 相 近 的 边框 重合 就 可 以 了 。 实 例 完成 后 ， 效 果 如 图 21-14 所 示 。 


Eales 
le) EW rv:css P -Cx| Geis cssn.. x| 了 十 


EE 


灰 达 作者 出 版 社 价格 


CSsERzr 何 丽 人 民 邮 电 出 版 社 39. 5 元 


王 伟 清华 出 版 社 33. 5 元 


图 21-14 模拟 表格 效果 
I02) 创建 XML 文档 。 


<?xml version="1.0" encoding="GB2312"?> 
<?xml-stylesheet type="text/css" href—="20.10.css"?> 
<INVENTORY> 
<image></image> 
<BOOK> 
<TITLE> 标 题 </TITLE> 
<AUTHOR> 作 者 </AUTHOR> 
<BINDING> 出 版 社 </BINDING> 
<PRICE> 价 格 </PRICE> 
</BOOK> <BOOK> 
<TITLE>Java 入 门 </TITLE> 
<AUTHOR> 李 张力 </AUTHOR> 
<BINDING> 清 华 大 学 出 版 社 </BINDING> 
<PRICE>25 元 </PRICE> 
</BOOK> 
<BOOK> 
<TITLE>CSS 设计 </TITLE> 
<AUTHOR> 何 丽 </AUTHOR> 
<BINDING> 人 民 邮 电 出 版 社 </BINDING> 
<PRICE>39.5 元 </PRICE> 
</BOOKR> 
<BOOK> 
<TITLE>XML 实例 </TITLE> 
<AUTHOR> 王 伟 </AUTHOR> 
<BINDING> 清 华 出 版 社 </BINDING> 
<PRICE>33.5 元 </PRICE> 
</BOOR> 


XML 文件 中 的 第 二 行 , 使 用 xml-stylesheet 标记 将 CSS 文件 引入 到 XML 文件 中 ， 下 面 创 
建 了 BOOK 标记 及 其 子 标记 TITLE、AUTHOR、PRICE 等 。 每 个 标记 都 包含 不 同 的 数据 。 
在 正 9.0 中 浏览 效果 如 图 21-15 所 示 ， 可 以 看 到 页 面 以 树 形 结构 显示 XML 文件。 


BT 
<pRICE> 从 入 </PRICE> 


图 21-15 图 书目 录 显 示 
to 创建 CSS 文件 ， 修 饰 指定 元 素 。 
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text-align: left: 
font-weight: bold: 
text-decoration:underline; 
} 
从 代码 中 , 可 以 看 出 针对 XML 文件 中 的 标记 , 定义 了 不 同 的 样式 。 其 思路 是 先 定义 BOOK 
标记 样式 ， 然 后 再 定义 其 子 标记 样式 。 
在 正 9.0 中 浏览 效果 如 图 21-16 所 示 ， 可 以 看 到 页 面 中 以 表格 方式 ， 显示 不 同 的 数据 ， 其 
数据 以 不 同 的 颜色 分 开 。 


5 = 
ES EAIMLCss PD- CX | Sewerma-csss. <| BD 
lk。 吾 覃 VM] BN 工具 (T) Wee(H) 
版 社 价格 


图 21-16 最 终 效果 
21.5 ”综合 实战 3 一 一 图 文 混 排 页 面 
图 文 搭配 布局 是 显示 的 永恒 话题 , 通过 文字 进行 介绍 , 通过 图 形 进 行 说 明 , 两 者 相得益彰 ， 
互 为 补充 。 本 实例 使 用 XML 文档 结合 CSS 文件 完成 图 文 混搭 的 布局 。 有 具体 步骤 如 下 所 示 。 
0 和 分 析 需 求 。 


将 图 形 和 文字 放 在 一 起 进行 布局 , 需要 将 图 形 放 在 一 个 指定 的 位 置 显示 , 最 好 定义 其 显示 
大 小 ， 文 字 可 以 环绕 图 片 ， 也 可 以 放 在 图 片 一 侧 显示 。 实 例 完成 后 ， 效 果 如 图 21-17 所 示 。 


【 加 EN 本 HrMtxcss DO - CX | 局 ExTML css 网 
Er 下 看 上 关 工具 福 妈 9) | 
用 三 大 妥 务 保 攻 | 
家 :+ 立秋 进补 应 适 襄 丽 喀 ?h 最 重要 
+ 起床 后 5 个 二 现象 训 明 作 括 来 越 老 
-国内 | 外 向 价 连 结 了 两 局 现下 跌 具体 称 是 “ 角 插 ” 
-于 经 | 生生 BE 百 点 寺 : aax 大 和 时 回 _ 年 前 
-互联 同 | 用 从 红 于 台 8 外 机 
- 作 育 | 世界 妇 撞 大奖 守 省 中 国 B 人 _ 胜 二 员 殉 入 二 
- 旧 所 | 打工 如 入 才 @ 影 白 己 当主 角 适 亲 友 没 :水 图 ) 
-六 人 阳 击 外 续 入 可 有 人 了 


21-17 ”图 文 混 排 
[02 构建 XML 文档 。 
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<?xml version="1.0" encoding="gb2312"?> 
<?xml-stylesheet type="text/css" href="20.11.css"?> 
<xinwen> 
<content> 
<right> 
<img></img> 
九 典 寿星 口服 液 三 大 服务 保 长 寿 
<br 户 
专家 : 立秋 进补 应 适度 缺 啥 补 啥 最 重要 
<br 亡 
养生 : 起 床 后 5 个 坏 现象 说 明 你 越 来 越 老 
<br> 
</right> 
* 国内 | 猪肉 价格 连续 两 周 出 现下 跌 媒体 称 是 “ 假 摔 ” 
<br /> 
“财经 | 沪指 午 盘 跌 近 百 点 失 3.68% 大 盘 跌 回 一 年 前 
<br /> 
* 互联 网 | 网 络 借贷 平台 频 现 危机 
<br/> 
* 体育 | 世界 女排 大 奖 赛 首 站 中 国 队 一 胜 二 负 列 第 三 
<br/> 
* 娱乐 | 打工 妹 卖房 拍 电 影 自己 当主 角 遭 亲友 泼冷水 (图 ) 
<br /> 
“女人 | 阻击 紫外 线 彻 查 身体 防晒 死角 


</content> 


</xinwen> 
在 XML 文件 中 ， 首 先 定义 了 根 标记 xinwen， 然 后 定义 了 content 标记 ，content 标记 中 包 
含 right、img 和 br 标记 。 


在 正 9.0 中 浏览 效果 如 图 21-18 所 示 , 可 以 看 到 页 面 中 显示 了 一 个 树 形 结构 ， 其 元 素 中 包 
含 了 不 同 的 文本 数据 。 


现 HAUseriVdminist PP - EX| 碌 hAuserswd 
立体 中 。 六 竹下 看 | 作 吉 =(A) 工具 和 助 (H) 
<?xml version="1.0" encoding="GB2312"?> 
- <xinwen> 
~ <content> 
- <right> 
<img/> 
九 奥 青 星 口服 六 三 大 服务 保 长 寿 
<br/> 
专家 : 立秋 进补 应 适度 热 险 补办 最 重要 


养生 : 起 床 后 5 个 坏 现象 庆 胃 你 捧 未 括 老 


1 猪 内 价格 连续 两 司 出 现下 跌 埋 体 称 是 " 假 捧 ” 
1 沪指 午 盘 哑 近 百 点 坤 3.68qe 大 盘 跌 回 一 年 前 


<br/> 
-互联 网 | 网 党 借贷 平台 须 玉 名 机 


图 21-18 图 文 混 排 树 形 结构 
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3) 添加 CSS 样式 ， 修 饰 xinwen、br 和 content 元 素 。 


Xinwen{ 
width:400px: 
font-size:12px: 
font-family:" 宋 体 ": 
margin:0 auto 0 auto; 
} 

br{ 
display:block: 
} 

content{ 
width:350px: 
border:#CC6600 1px solid: 
float:left: 
line-height:25px: 
margin-left: 10px; 
background-color:#ddeecc: 
} 


在 CSS 文件 中 ， 创 建 了 不 同 的 标记 选择 器 ， 针 对 XML 文件 标记 进行 修饰 ， 即 设置 字体 、 
边框 、 位 置 和 背景 属性 。 需要 注意 的 是 , 由 于 使 用 了 XML 文档 , 所 有 <br> 标 记 不 能 像 在 HTML 
里 那样 实现 换行 的 效果 ， 这 里 需要 为 <br> 定 义 CSS 样式 ， 才 能 实现 正文 里 的 换行 效果 。 

在 下 9.0 中 浏览 效果 如 图 21-19 所 示 , 可 以 看 到 页 面 中 显示 了 黄色 边框 ,边框 内 显示 了 相 
关 列 表 信 息 。 


S| ea mecss Pp - ox | sevmarmv-csn< | 
文 愉 站 卉 筷 | 至 嗜 (V) 以 滞 关 (A) 工具 (地 风 (H) 


:起 和 后 :个 十 并 象 主 条 人 8 让 拓 老 

“国内 | 猪 内 虱 格 连续 丙 同 出 现下 跌 次 作 称 是 “保皇” 

“ 则 经 | 淹 和 二 盘 近 百 占 柏 : 88% 大 各 加 一生 前 
“五 同 | 网 癌 全 下 各 类 名 村 

-传译 | 世界 女排 大 淆 将 普 让 巾 国 队 一 此 一 六 列 攻 二 
“可乐 | 打工 古 卖 房 拘 电 影 全 已 当主 角 得 亲友 发 六 水 园 
“女人 | 轨 击 名 外 二 和 宜 身体 03 本 殉 避 


图 21-19 修饰 指定 标记 
to 级 添加 CSS 样式 ， 修 饰 img 和 right 元 素 。 


img{ 
width:115px: 
height:70px: 
background-image:url(003 jpe): 
float:left: 
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margin:5px 0 0 Spx:; 
hb 
Tight{ 
border-bottom:#999999 dotted 2px: 
} 


上 面 的 CSS 代码 中 定义 了 img 元 素 显示 样式 ， 如 宽度 、 高 度 、 背 景 图 片 、 左 浮动 和 外 边 


距 距 离 等 。 


在 正 9.0 中 浏览 效果 如 图 21-20 所 示 ， 可 以 看 到 页 面 中 边框 内 显示 了 一 张 图 片 。 


WIM cS. x 


“ 珊 乐 | 打工 并 克也 泊 电 影 己 汝 主角 间 示 友 涉 汐 水 台 


“大 人 阳 击 信州 嫩 全 可 身体 防 酉 和 月 


图 21-20 最终 效果 


21.6 ”综合 实战 4 一 一 古诗 欣赏 


在 一 些 古典 风格 的 网 站 中 , 通常 有 很 多 漂亮 的 古诗 页 面 。 本 实例 将 模拟 这 种 效果 。 


骤 如 下 所 示 。 
4 分 析 需 求 。 


具体 步 


如 果 要 展示 古诗 内 容 ， 需 要 使 用 绝对 定位 的 方法 ， 为 XML 文档 的 段落 文字 排版 。 同 样 也 


可 以 导入 一 个 漂亮 的 背景 ， 配 合 文字 展示 。 实 例 完成 后 ， 效 果 如 图 21-21 所 示 。 


加 EHIML+CSS PD” OX 


厨 ENEHTML+CSS.. x| 


图 21-21 古诗 欣赏 页 面 
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to3 创建 XML 文档 。 


<?xml version="1.0" encodine="gb2312"?> 
<?xml-stylesheet type="text/css" href—"20.12.css"?> 
<qiu> ”<title> 立 秋 </title> 
<author> 宋 ” 刘 翰 </author> 
<content> 
乳 鸦 啼 散 玉屏 空 ， 一 枕 新 凉 一 扇 风 。<br/> 
睡 起 秋色 无 更 处 ， 满 阶 梧桐 月 明 中 。<br/> 
</content></qiu> 


XML 文档 的 内 容 非常 简单 ， 创 建 了 一 个 根 标记 qiu， 及 其 子 标记 title、author 和 content。 
xml-stylesheet 表示 引入 一 个 CSS 文件 。 在 正 9.0 中 浏览 效果 如 图 21-22 所 示 ， 可 以 看 到 页 面 
中 显示 了 一 个 树 形 结构 。 


四 HAuserswdminis PD ~ OX 


查看 (V) 站 写实 (A) 工具 (T) 帮 动 (H) 
<?xml version="1.0" encoding="GB2312"?> 
- <qiu> 
<title> 立 秋 </title> 
<author> 宋 刘 输 </author> 
- <content> 
乳 鸥 啼 散 王 屏 空 ， 一 杖 新 京 一 店 风 。 
<br/> 
睡 起 秋色 无 况 处 ， 茵 阶 梧桐 月 明 中 。 
<br/> 
</content> 
</qiu> 


| 


图 21-22 古诗 树 形 结构 
03) 创建 CSS 文件， 修饰 qiu 元 素 。 


qin{ 
margin:Opx: 
background:url(lan.jpg) no-repeat; /# 添 加 背景 图 片 */ 
width:460px: 
height:320px: 


position:absolute; ”/* 绝对 定位 */} 


上 面 的 代码 定义 了 qiu 标记 显示 样式 ， 如 外 边 距 、 背 景 图 片 、 宽 度 、 高 度 和 绝对 定位 。 
在 正 9.0 中 浏览 效果 如 图 21-23 所 示 ， 可 以 看 到 页 面 中 显示 了 一 段 文字 ， 无 任何 格式 。 
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|E sarmwtcss p - CX |@ erm ces. x 
ET 


图 21-23 定义 背景 
to 弥 添加 CSS 代码 ， 修 饰 title 和 author 元 素 。 


title{ 
font-size:30px; 
color:green; 
position:absolute: 
left:140px: 
top:20px; 

}author{ 
font-size:18px: 
color:#4f2b00; 
position:absolute: 
left:160px: 
top:5Opx; 


上 面 的 CSS 代码 中 ， 定 义 了 title 标记 和 author 标记 的 显示 样式 ， 如 字体 大 小 、 颜 色 、 绝 
对 定位 和 坐标 位 置 。 
在 正 9.0 中 浏览 效果 如 图 21-24 所 示 ， 可 以 看 到 页 面 中 的 标题 和 作者 信息 ， 在 指定 位 置 显 示 。 


当 EMEBHTMLtcss P- Ox| Gememm-cssn.. | Bo 
双全 要 玉 全 和 W1 届 四 A 工具 IT 吉 0 


21-24 ”定义 标题 和 作者 信息 
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tog 添加 CSS 代码， 修饰 cotent 元 素 。 


content{ 
Position:absolute: 上 # 绝对 定位 */ 
font-size:24pxX: 
line-height:30px: /* 行 间距 */ 
left:40px: 
top:70px; 
font-family:" 幼 圆 ":} 
br{ ”display:block; 。 /* 让 诗句 分 行 显示 */} 
在 CSS 文件 中 ， 定 义 了 content 元 素 的 显示 样式 ， 如 字体 大 小 、 行 高 、 坐 标 位 置 等 。 这 里 
的 <br> 标 记 也 起 到 了 换行 作用 ， 当 将 标记 的 display 属性 定义 为 block 时 ， 可 以 得 到 换行 的 效 


果 。 在 下 9.0 中 浏览 效果 如 图 21-25 所 示 ， 可 以 看 到 页 面 中 的 古诗 在 指定 位 置 显 示 ， 并 且 标题 
颜色 为 绿色 ， 作 者 颜色 为 黄色 。 


SHTML+CSSR- x | 记 衣 


图 21-25 最终 效果 


21.7 ”专家 解 惑 
1. 背景 色 和 背景 图 片 放 在 一 起 定义 好 吗 ? 
在 设 定 背 景 图 片 时 , 最 好 同时 也 设 定 背景 色 , 这 样 当 背 景 图 片 因 某 种 原因 无 法 正常 显示 时 ， 
可 以 使 用 背景 色 来 代替 。 当 然 ， 如 果 正 常 显示 ， 背 景 图 片 会 覆盖 背景 色 的 。 
2. XML 和 HTML 文件 有 什么 相同 之 处 和 不 同 之 处 ? 


HTML 和 XML 都 是 从 SGML 发 展 而 来 的 标记 语言 ， 因 此 ， 它 们 有 些 共 同 点 ， 如 相似 的 
语法 和 标记 。 不 过 HTML 是 SGML 定义 下 的 一 个 描述 性 语言 ， 只 是 SGML 的 应 用 。 而 XML 
是 SGML 的 简化 版 本 ， 是 SGML 的 一 个 子 集 。 

XML 是 用 来 存放 数据 的 ，XML 不 是 HTML 的 蔡 代 品 ，XML 和 HTML 是 两 种 用 途 不 同 
的 语言 。XML 是 被 设计 用 来 描述 数据 的 。HTML 只 是 一 个 显示 数据 的 标记 语言 。 


第 22 章 
4CSS 与 Ajax 的 综合 应 用 ， 


Ajax 是 目前 新 兴 的 一 项 网 络 技术 。 确 切 地 说 ， ep -种 用 于 创建 更 好 、 更 快 以 及 交互 
性 更 强 的 Web 应 用 程序 的 技术 。 它 能 使 浏览 器 为 用 户 提供 更 为 自然 的 浏览 体验 ， 就 像 在 使 用 
桌面 应 用 程序 一 样 。 


22.1 Ajax 概述 


Ajax 是 一 项 很 有 生命 力 的 技术 ， 它 的 出 现 引 发 了 Web 应 用 的 新 革命 。 目 前 ， 网 络 上 的 许 
多 站 点 ， 使 用 Ajax 技术 的 还 很 少 ， 但 是 ， 可 以 预见 在 不 远 的 将 来 ，Ajax 技术 会 成 为 整个 网 络 
的 主流 。 


22.1.1 什么 是 Ajax 


Ajax 的 全 称 为 Asynchronous JavaScript And XML， 是 一 种 Web 应 用 程序 客户 机 技术 ， 
结合 了 JavaScript、 层 车 样式 表 (Cascading Style Sheets，CSS)、HTML、XMLHttpRequest 
对 象 和 文档 对 象 模型 (Document Object Model，DOM) 多 种 技术 。 运 行 在 浏览 器 上 的 Ajax 
应 用 程序 ， 以 一 种 异步 的 方式 与 Web 服务 器 通信 ， 并 且 只 更 新 页 面 的 一 部 分 。 通 过 利用 Ajax 
技术 ， 可 以 提供 基于 浏览 器 的 丰富 的 用 户 体验 。 

Ajax 让 开发 者 在 浏览 器 端 更 新 被 显示 的 HTML 内 容 而 不 必 刷 新 页 面 。 换 句 话说 ，Ajax 可 
以 使 基于 浏览 器 的 应 用 程序 更 具 交 互 性 而 且 更 类 似 于 传统 型 桌面 应 用 程序 。Google 的 Gmail 
和 Outlook Express 就 是 两 个 使 用 Ajax 技术 的 例子 。 而 且 ，Ajax 可 以 用 于 任何 客户 端 脚本 语言 
中 ， 包 括 JavaScript、JScript 和 VBScript。 

下 面 给 出 一 个 简单 的 实例 ， 来 具体 了 解 一 下 什么 是 Ajax。 

【 例 22.1】( 实 例文 件 : ch22\22.1.html) 

本 实例 从 一 个 简单 的 角度 入 手 ， 实 现 客户 端 与 服务 器 的 异步 通信 ， 获 取 “ 你 好 ，Ajax” 的 
数据 ， 并 在 不 刷新 页 面 的 情况 下 将 获得 的 “你 好 ，Ajax” 数 据 显 示 到 页 面 上 。 

具体 步骤 如 下 。 


0 和 使 用 记事 本 创建 HelloAjax.jsp 文件 。 代 码 如 下 : 


<%(@ page language="java" pageEncodine="gb2312"%> 
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<html> 
<head> 
<title> 第 一 个 Ajax 实例 </title> 
<style type="text/css"> 
<I-- 
body { 
background-image: url(images/img.jpe): 
} 
a> 
</style> 
</head> 
<script type="text/javascript"> 
ee /省略 了 script 代码 
</script> 
<body><br> 
<center> 
<button onclick="hello0">Ajax</button> 
<P id="p"> 
单 击 按钮 后 你 会 有 惊奇 的 发 现 哟 ! 
</P> 
</center> 
</body> 
</html> 


JavaScript 代码 嵌入 在 标签 <script></script> 之 内 ， 这 里 定义 了 一 个 函数 hello0， 这 个 函数 
是 通过 一 个 按钮 来 驱动 的 。 

3 在 步骤 1 省 略 的 代码 部 分 创建 XMLHttpRequest 对 象 ， 创 建 完成 后 把 此 对 象 赋值 给 
XMLHttp 变量 。 为 了 获得 多 种 浏览 器 的 支持 ， 应 使 用 createXMLHttpRequest 〇 函数 为 多 种 浏览 
器 创建 XMLHttpRequest 对 象 ， 代 码 如 下 : 


Var XmlHttp=false: 
function createXMLHttpRequest() 
: if (window.ActiveXObject) // 在 正 浏 览 器 中 创建 XMLHttpRequest 对 象 
{ 
ty{ 
XmlHttp=new ActiveXObject("MSsxml2.XMLHTTP"): 
} 
catch(e){ 
ty{ 


xmlHttp = new ActiveXObject("Microsoft. XMLHTTP"); 
} 
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catch(ee){ 
XmlHttp=false: 
吕 
上 
else if (window.XMLHttpRequest) // 在 非 正 浏览 器 中 创建 XMLHttpRequest 对 象 
{ 
try{ 
XmlHttp = new XMLHttpRequest|:; 
} 
catch(e){ 
xmlHttp=false; 


} 


i03| 在 步骤 1 省 略 的 代码 部 分 再 定义 hello0 函 数 , hello0 函 数 为 要 与 之 通信 的 服务 器 资源 
创建 一 个 URL，“xmlHttp.onreadystatechange=callback;” 定 义 了 JavaScript 回调 函数 ， 一 旦 响 
应 它 就 自动 执行 ， 而 “xmlHttp.open("post","HelloAjaxDo.jsp",true);” 中 所 指定 的 “true” 标 志 
说 明 想 要 异步 执行 该 请 求 ， 如 果 没 有 指定 则 默认 为 “tue”。 代 码 如 下 : 


function hello0 


createXMLHttpRequest0: /调用 创建 XMLHttpRequest 对 象 的 方法 
xmlHttp.onreadystatechange=callback: /设置 回调 函数 
xmlHttp.open("post"."HelloAjaxDo.jsp".true): // 向 服务 器 端 HelloAjaxDo.jsp 发 送 请 求 
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded:charset=gb2312"):; 
xmlHttp.send(null): 

function callbackO) 

{ 


if(xmlHttp.readyState—4) 
{ 
这 xmlHttp.status==200) 
1 
Var data= xmlHttp .TesponseText: 
Var PNode=document.getElementById("p"): 
PNode.innerHTML=data: 
} 
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医 函数 callbackO 是 回调 函数 ， 它 首先 检查 XMLHttpRequest 对 象 的 整体 状态 以 保证 
它 已 经 完成 (readyStatus 一 4) ， 然 后 根据 服务 器 的 设 定 询问 请 求 状态 。 如 果 一 切 
正常 ， 即 ( status 一 200 ) ， 就 使 用 “var data=xmlHttp.responseText;” 取 得 返回 的 
数据 ， 用 innerHTML 属性 重 写 DOM 的 “pNode” 节 点 的 内 容 。 


JavaScript 的 变量 类 型 使 用 的 是 弱 类 型 ， 都 使 用 var 来 声明 。document 对 象 就 是 文档 对 应 
的 DOM 树 。 通 过 “document.getElementById("p");” 可 以 用 标签 的 id 值 来 取得 此 标签 的 一 个 
引用 《〈 树 的 节点 ) ; “pNode.innerHTML=str; ”为 节点 添加 内 容 ， 这 样 就 覆盖 了 节点 的 原 有 内 
容 ， 如 果 不 想 覆盖 可 以 使 用 “pNode.innerHTML+=str;” 来 追加 内 容 。 


4 通过 步骤 3 可 以 知道 要 异步 请 求 的 是 HelloAjaxDo.jsp， 下 面 需 要 创建 此 文件 ， 代 码 
如 下 : 

<%@ page language="java" pageEncodine="gb2312"%> 

<% 

out.printIn(" 你 好 ，Ajax"): 

%> 

tog 将 上 述 文件 保存 在 Ajax 站 点 下 ， 启 动 Tomcat 服务 器 打开 浏览 器 ， 在 地 址 栏 输入 
“http://localhost:8080/Ajax/HelloAjax.jsp”， 单 击 【 转 到 】 按 钮 ， 结 果 如 图 22-1 所 示 。 


收 这 W) 工具 CT) 帮助 人 0 
地 址 中 | 蜀 http://lecahest:a0e0/je/sllekjax jsp 呈 固 和 ;六 扫 >” 


图 22-1 会 变 的 页 面 
to6j 单 击 Ajax 按钮 ， 显 示 页 面 如 图 22-2 所 示 ， 注 意 按 钮 下 内 容 的 变化 。 


站] 
文件 E) 六 匈 G) 查看 GD) 收 立 由 工具 CD) 帮助 0D 
城址 四) 痢 Mtp://1ocalhost-8080/Ajwx/HelloNjwx jsp 癌 | 加 和 到 ;生计 ” 


22-2 ”动态 改变 页 面 


“413。 
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22.1.2 ”Ajax 的 关键 元 素 


Ajax 不 是 单一 的 技术 ， 而 是 4 种 技术 的 集合 ， 要 灵活 地 运用 Ajax， 必 须 深 入 了 解 这 些 不 
同 的 技术 ， 表 22-1 中 列 出 了 这 些 技术 ， 以 及 它们 在 Ajax 中 所 扮演 的 角色 。 


表 22-1 Ajax 涉及 的 技术 


名 称 描述 

JavaScript JavaScript 是 通用 的 脚本 语言 ,用 来 嵌入 在 某 种 应 用 之 中 。Web 浏览 器 中 嵌入 的 JavaScript 
解释 器 允许 通过 程序 与 浏览 器 的 很 多 内 建功 能 进行 交互 。Ajax 应 用 程序 是 使 用 JavaScript 
编写 的 

Css CSS 为 Web 页 面 元 素 提供 了 一 种 可 重用 的 可 视 化 样式 的 定义 方法 。 它 提供 了 简单 而 又 强 
大 的 方法 ， 以 一 致 的 方式 定义 和 使 用 可 视 化 样式 。 在 Ajax 应 用 中 ， 用 户 界面 的 样式 可 以 
通过 CSS 独立 修改 

DOM DOM 以 一 组 可 以 使 用 JavaScript 操作 的 可 编程 对 象 展现 出 Web 页 面 的 结构 。 通 过 使 用 脚 
本 修改 DOM，Ajax 应 用 程序 可 以 在 运行 时 改变 用 户 界面 ， 或 者 高 效 地 重 绘 页 面 中 的 某 个 
部 分 

XMLHttpRequest | XMLHttpRequest 对 象 允许 Web 程序 员 从 Web 服务 器 以 后 台 活 动 的 方式 获取 数据 。 数 据 

对 象 格式 通常 是 XML， 但 是 也 可 以 很 好 地 支持 任何 基于 文本 的 数据 格式 


Ajax 的 4 种 技术 当中 ，CSS、DOM 和 JavaScript 都 是 很 早 就 出 现 的 技术 ， 它 们 以 前 结合 
在 一 起 称 为 动态 HTML， 即 DHTML。 

Ajax 的 核心 是 JavaScript 对 象 XmlHttpRequest。 该 对 象 在 Intemet Explorer 5 中 首次 引入 ， 
它 是 一 种 支持 异步 请 求 的 技术 。 简 而 言 之 ，XmlHttpRequest 使 您 可 以 使 用 JavaScript 向 服务 器 
提出 请 求 并 处 理 响应 ， 而 不 阻塞 用 户 。 


22.1.3 CSS 在 Ajax 应 用 中 的 地 位 


CSS 在 Ajax 中 主要 用 于 美化 网 页 ， 是 Ajax 的 美术 师 。 无 论 Ajax 的 核心 技术 采用 什么 形 
式 ， 任 何 时 候 显示 在 用 户 面前 的 都 是 一 个 页 面 ， 就 需要 CSS 对 显示 在 用 户 浏览 器 上 的 界面 进 
行 美化 。 

如 果 用 户 在 浏览 器 中 查看 页 面 的 源 代码 , 就 可 以 看 到 众多 的 <div> 块 以 及 CSS 属性 占据 了 
源 代码 的 大 部 分 ， 如 图 22-3 所 示 。 从 这 一 点 可 见 CSS 在 页 面 美化 方面 的 重要 性 。 
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B] http//www114la.com/?114la - 原 光 [=-ele 
文件 (站 蝙 者 (E) 想 式 (0) Sy 

17 “title2114 啦 网 址 导航 [yww. 114La. Com]_ 最 实用 的 上 网 主页 上 网 就 上 114 啦 ! 《ftitle> 以 

18 《seript type="text/javascript"ywar BaiduTn = {tn:“ylnf 4_pe”, ch: "4" };C/script> 国 

19 | seript type="text/javascript” sre="public/hone_new/js/base. js” charset="gb2312">C/seript> 

20 

21 Qink id="js_oStyle” href="public/hone_new/css/index. css?v0308” rel="stylesheet” 

type=" 人 > 

22 

23 dlink rel="stylesheet” id-"js_skinStyle” href=“public/hone_new/css/skin/blue. css 2 

24 

25 《seript type="text/javaseript"> 

26 

27 | /**# 处 理 cookie (包括 宽屏 , 旧版 , 皮肤 )**/ 

28 

29 | (function Of 

30 

31 | if (Cookie. getC layout’ )) { 

32 

33 window. location href = ‘kp. htnl’ ; 

34 

35| } > 


图 22-3 源 文件 中 的 CSS 代码 


22.2 Ajax 快速 入 门 


Ajax 作为 一 项 新 技术 ， 结 合 4 种 不 同 的 技术 ， 实 现 了 客户 端 与 服务 器 端的 异步 通信 ， 并 
且 对 页 面 实现 局 部 更 新 ， 大 大 提高 了 浏览 器 的 速度 。 


22.2.1 全 面 剖析 XMLHttpRequest 对 象 


XMLHttpRequest 对 象 是 当今 所 有 Ajax 和 Web 2.0 应 用 程序 的 技术 基础 。 尽 管 软件 经 销 商 
和 开源 社团 现在 都 在 提供 各 种 Ajax 框架 ， 以 进一步 简化 XMLHttpRequest 对 象 的 使 用 ; 但 是 ， 
我 们 仍然 很 有 必要 理解 这 个 对 象 的 详细 工作 机 制 。 


1. XMLHttpRequest 概述 


Ajax 利用 一 个 构建 到 所 有 现代 浏览 器 内 部 的 对 象 XMLHttpRequest 来 实现 发 送 和 接收 
HTTP 请 求 与 响应 信息 。 一 个 经 由 XMLHttpRequest 对 象 发 送 的 HTTP 请 求 并 不 要 求 页 面 中 拥 
有 或 回 寄 一 个 <form 二 元 素 。 

在 微软 正 5 中 ,作为 一 个 ActiveX 对 象形 式 引 入 了 XMLHttpRequest 对 象 。 其 他 认识 到 这 
一 对 象 重要 性 的 浏览 器 制造 商 也 都 纷纷 在 其 浏览 器 内 实现 了 XMLHttpRequest 对 象 , 但 是 作为 
一 个 本 地 JavaScript 对 象 而 不 是 作为 一 个 ActiveX 对 象 实现 的 。 

如 今 ， 在 认识 到 实现 这 一 类 型 的 价值 及 安全 性 特征 之 后 ， 微 软 已 经 在 其 正 7 中 把 
XMLHttpRequest 实现 为 一 个 窗口 对 象 属性 。 幸 运 的 是 ， 尽 管 其 实现 细节 不 同 ， 但 是 ， 所 有 的 
浏览 器 实现 都 具有 类 似 的 功能 ， 并 且 实 质 上 是 相同 方法 。 目 前 ，W3C 组 织 正 在 努力 进行 
XMLHttpRequest 对 象 的 标准 化 。 

2. XMLHttpRequest 对 象 的 属性 和 事件 


XMLHttpRequest 对 象 包括 各 种 属性 、 方 法 和 事件 ， 以 便于 脚本 处 理 并 控制 HTTP 请 求 与 
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响应 。 下 面 对 此 进行 详细 的 讨论 。 
® readyState 属性 


当 XMLHttpRequest 对 象 把 一 个 HTTP 请 求 发送 到 服务 器 时 将 经 历 若干 种 状态 , 一 直 等 待 
直到 请 求 被 处 理 , 它 才 接收 一 个 响应 。 这样 以 来 , 脚本 才 正 确 响应 各 种 状态 , XMLHttpRequest 
对 象 暴露 描述 对 象 的 当前 状态 的 是 readyState 属性 ， 如 表 22-2 所 示 。 


表 22-2 XMLHttpRequest 对 象 的 readyState 属性 值 列表 


readyState 取 值 “| 描述 

0 描述 一 种 “未 初始 化 ”状态 ， 此 时 ， 已 经 创建 一 个 XMLHttpRequest 对 象 ， 但 是 
还 没有 初始 化 

1 open0 方 法 并 且 XMLHttpRequest 已 经 准备 好 把 一 个 请 求 发 送 到 服务 器 

2 描述 一 种 “发 送 ”状态 ; 此 时 ,已 经 通过 send() 方 法 把 一 个 请 求 发 送 到 服务 器 端 ， 
但 是 还 没有 收 到 一 个 响应 

3 描述 一 种 “正在 接收 ”状态 ; 此 时 ， 已 经 接收 到 HTTP 响应 头 部 信息 ， 但 是 消息 
体 部 分 还 没有 完全 接收 结束 

4 描述 一 种 “已 加 载 ” 状 态 ， 此 时 ， 响 应 已 经 被 完全 接收 


@ onreadystatechange 事件 


无 论 readyState 值 何 时 发 生 改变 ，XMLHttpRequest 对 象 都 会 激发 一 个 onreadystatechange 
事件 。 其 中 ，onreadystatechange 属性 接收 一 个 EventListener 值 ， 该 值 向 该 方法 指示 无 论 
readyState 值 何 时 发 生 改变 ， 该 对 象 都 将 激活 。 


@ responseText 属性 


这 个 responseText 属性 包含 客户 端 接收 到 的 HTTP 响应 的 文本 内 容 。 当 readyState 值 为 0、 
1 或 2 时 ，responseText 包含 一 个 空 字符 串 。 当 readyState 值 为 3 (正在 接收 ) 时 ， 响 应 中 包含 
客户 端 还 未 完成 的 响应 信息 。 当 readyState 为 4 (已 加 载 ) 时 ， 该 responseText 包含 完整 的 响 
应 信息 。 


@ responseXML 属性 


responseXML 属性 用 于 当 接 收 到 完整 的 HTTP 响应 时 描述 XML 响应 ; 此 时 , Content-Type 
头 部 指定 MIME (媒体 ) 类 型 为 text/xml、application/xml 或 以 +xml 结尾 。 如 果 Content-Type 
头 部 并 不 包含 这 些 媒体 类 型 ， 那 么 responseXML 的 值 为 null。 无 论 何 时 ， 只 要 readyState 值 不 
为 4， 那 么 该 responseXML 的 值 也 不 为 null。 

其 实 ， 这 个 responseXML 属性 值 是 一 个 文档 接口 类 型 的 对 象 ， 用 来 描述 被 分 析 的 文档 。 
如 果 文 档 不 能 被 分 析 《〈 例 如 ， 如 果 文 档 不 是 良 构 的 或 不 支持 文档 相应 的 字符 编码 ) ， 那 么 
responseXML 的 值 将 为 null。 
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®@ status 属性 


status 属性 描述 了 HTTP 状态 代码 ， 而 且 其 类 型 为 short。 仅 当 readyState 值 为 3 (正在 接 
收 中 ) 或 4( 已 加 载 ) 时 , 这 个 status 属性 才 可 用 。 当 readyState 的 值 小 于 3 时 , 试图 存 取 status 
的 值 将 引发 一 个 异常 。 


@ statusText 属性 


statusText 属性 描述 了 HTTP 状态 代码 文本 ; 并 且 仅 当 readyState 值 为 3 或 4 才 可 用 。 当 
readyState 为 其 他 值 时 ， 试 图 存 取 statusText 属性 将 引发 一 个 异常 。 


3. 创建 XMLHttpRequest 对 象 的 方法 


XMLHttpRequest 对 象 提供 了 各 种 方法 用 于 初始 化 和 处 理 HITP 请 求 ， 下 面 对 此 进行 详细 
介绍 。 


@ abort( 方 法 


用 户 可 以 使 用 abort() 方 法 来 暂停 与 一 个 XMLHttpRequest 对 象 相 联系 的 HTTP 请 求 ， 从 而 
把 该 对 象 复 位 到 未 初始 化 状态 。 


@ open() 方 法 


用 户 需要 调用 open() 方 法 来 初始 化 一 个 XMLHttpRequest 对 象 。 其 中 ,method 参数 是 必须 
提供 的 , 用 于 指定 你 想 用 来 发 送 请 求 的 HTTP 方法 ,为 了 把 数据 发 送 到 服务 器 , 应 该 使 用 POST 
方法 ;为 了 从 服务 器 端 检索 数据 ， 应 该 使 用 GET 方法 。 


@ send() 方 法 


在 通过 调用 open() 方 法 准备 好 一 个 请 求 之 后 ， 用 户 需要 把 该 请 求 发 送 到 服务 器 。 仅 当 
readyState 值 为 1 时 ， 用 户 才 可 以 调用 send0 方 法 ， 否则 ，XMLHttpRequest 对 象 将 引发 一 个 异 


让 


吊 。 
@ setRequestHeader() 方 法 


setRequestHeader() 方 法 用 来 设置 请 求 的 头 部 信息 。 当 readyState 值 为 1 时 ， 用 户 可 以 在 调 
用 open() 方 法 后 调用 这 个 方法 ;否则 ， 将 得 到 一 个 异常 。 


@ getResponseHeader() 方 法 


getResponseHeader() 方 法 用 于 检索 响应 的 头 部 值 。 仅 当 readyState 值 是 3 或 4( 换 句 话说 ， 
在 响应 头 部 可 用 以 后 ) 时 ， 才 可 以 调用 这 个 方法 ， 和 否则 ， 该 方法 返回 一 个 空 字符 串 。 


@ getAllResponseHeaders() 方 法 


getAllResponseHeaders() 方 法 以 一 个 字符 串 的 形式 返回 所 有 的 响应 头 部 每 一 个 头 部 占 单 
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独 的 一 行 ) 。 如 果 readyState 的 值 不 是 3 或 4， 则 该 方法 返回 null。 
22.2.2 发 出 Ajax 请 求 


在 Ajax 中 ， 许 多 使 用 XMLHttpRequest 的 请 求 都 是 从 一 个 HTML 事件 〈 例 如 一 个 调用 
JavaScript 函数 的 按钮 点 击 事件 或 一 个 按键 事件 ) 中 被 初始 化 的 。Ajax 支持 包括 表单 校 验 在 内 
的 各 种 应 用 程序 。 有 时 ， 在 填充 表单 的 其 他 内 容 之 前 要 求 校 验 一 个 唯一 的 表单 域 。 例 如 ， 要 求 
使 用 一 个 唯一 的 UserID 来 注册 表单 。 如 果 不 是 使 用 Ajax 技术 来 校 验 这 个 UserID 域 ， 那 么 整 
个 表单 都 必须 被 填充 和 提交 。 如 果 该 UserID 不 是 有 效 的 ， 这 个 表单 必须 被 重新 提交 。 例 如 ， 
相应 于 一 个 要 求 必须 在 服务 器 端 进行 校 验 的 Catalog ID 的 表单 域 可 按 下 列 形式 指定 : 


<form name="validationForm" action="validateForm" method="post"> 
<table> 
<tr><td>Catalog Id:</td> 

<td> 

< input type="text" size="20" id="catalogld" name="catalogId" autocomplete="off' onkeyup= 
"sendRequest0"> 

</td> 

<td> <div id="validationMessage"> </div> </td> 
</r> 
</table></form> 


前 面 的 HTML 使 用 validationMessage div 来 显示 对 应 于 这 个 输入 域 Catalog Id 的 一 个 校 验 
消息 。onkeyup 事件 调用 JavaScript 的 sendRequest0) 函 数 。 这 个 sendRequestO 函 数 创建 一 个 
XMLHttpRequest 对 象 。 创 建 XMLHttpRequest 对 象 的 过 程 因 浏览 器 实现 的 不 同 而 有 所 区 别 。 

如 果 浏 览 器 支持 XMLHttpRequest 对 象 作为 一 个 窗口 属性 ， 那 么 ， 代 码 可 以 调用 
XMLHttpRequest 的 构造 器 。 如 果 浏 览 器 把 XMLHttpRequest 对 象 实现 为 一 个 ActiveXObject 对 
象 ， 那 么 ， 代 码 可 以 使 用 ActiveXObject 的 构造 器 。 下 面 的 代码 将 调用 一 个 initO 函 数 。 


<script type="text/javascript"> 
function sendRequestO{ 
Var xmlHttpReq=init(): 
function initO{ 

if (window.XMLHttpRequest) { 

return new XMLHttpRequest(): 

} 
else if (window.ActiveXObject) { 

return new ActiveXObject("Microsoft. XMLHTTP"): 


} 
</script> 


接 下 来 , 用户 需要 使 用 Open() 方 法 初始 化 XMLHttpRequest 对 象 ， 从 而 指定 HITP 方法 和 
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要 使 用 的 服务 器 URL。 


Var catalogId=encodeURIComponent(document.getElementById("catalogId").value): 
xmlHttpReq.open("GET", "validateForm?catalogId=" + catalogId， true); 


默认 情况 下 ， 使 用 XMLHttpRequest 发 送 的 HTTP 请 求 是 异步 进行 的 ， 但 是 用 户 可 以 显 式 
地 把 async 参数 设置 为 tue。 在 这 种 情况 下 ， 对 URL validateForm 的 调用 将 激活 服务 器 端的 一 
个 servlet。 但 是 用 户 应 该 能 够 注意 到 服务 器 端 技 术 不 是 根本 性 的 ;实际 上 ， 该 URL 可 能 是 一 
个 ASP、ASPNET 或 PHP 页 面 或 者 一 个 Web 服务 ， 只 要 该 页 面 能 够 返回 一 个 响应 ， 指 示 
CatalogID 值 是 否 是 有 效 的 即 可 。 因 为 用 户 在 进行 异步 调用 时 ， 需 要 注册 一 个 XMLHttpRequest 
对 象 来 调用 回调 事件 处 理 器 ， 当 它 的 readyState 值 改变 时 调用 。 记 住 ，readyState 值 的 改变 将 
会 激发 一 个 readystatechange 事件 。 这 时 可 以 使 用 onreadystatechange 属性 来 注册 该 回调 事件 处 
理 器 。 


xmlHttpReq.onreadystatechange=processRequest:; 


然后 ， 需 要 使 用 send( 方 法 发 送 该 请 求 。 因 为 这 个 请 求 使 用 的 是 HITP GET 方法 ， 所 以 ， 
用 户 可 以 在 不 指定 参数 或 使 用 null 参数 的 情况 下 调用 send0 方 法 。 


xmlHttpReq.send(null): 
22.2.3 ”处 理 服务 器 响应 


在 上 述 示例 中 ,因为 HTTP 方法 是 GET, 所 以 在 服务 器 端 接 收 的 servlet 将 调用 一 个 doGet() 
方法 , 该 方法 将 检索 在 URL 中 指定 的 catalogId 参数 值 , 并 且 从 一 个 数据 库 中 检查 它 的 有 效 性 。 
该 示例 中 的 servlet 需要 构造 一 个 发 送 到 客户 端的 响应 ; 而 且 , 这 个 示例 返回 的 是 XML 类 
型 ， 因 此 ， 它 把 响应 的 HTTP 内 容 类 型 设置 为 text/xml 并 且 把 Cache-Control 头 部 设置 为 
no-cache。 设 置 Cache-Control 头 部 可 以 阻止 浏览 器 简单 地 从 缓存 中 重 载 页 面 。 具 体 的 代码 如 下 。 
public void doGet(HttpServletRequest request, 


HttpServletResponse response) 
throws ServletException, IOException { 


response.setContentType("text/xml"): 
Tesponse.setHeader("Cache-Control"， "no-cache"): 


} 


从 上 述 代 码 中 可 以 看 出 ， 来 自 于 服务 器 端的 响应 是 一 个 XML DOM 对 象 ， 此 对 象 将 创建 
一 个 XML 字符 串 ， 其 中 包含 要 在 客户 端 进行 处 理 的 指令 。 另 外 ， 该 XML 字符 串 必须 有 一 个 
根 元 素 。 代 码 如 下 。 


out.printin(" <catalogId> valid</catalogId>"): 


. 419 ， 
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EB XMLHttpRequest 对 象 设 计 的 目的 是 处 理由 普通 文本 或 XML 组 成 的 响应 ; 但 是 ， 
”一 个 响应 也 可 能 是 另外 一 种 类 型 ， 如 果 用 户 代理 支持 这 种 内 容 类 型 的 话 。 


Ci 


当 请 求 状态 改变 时 ,XMLHttpRequest 对 象 调用 使 用 onreadystatechange 注 册 的 事件 处 理 器 。 
因此 ， 在 处 理 该 响应 之 前 ， 用 户 的 事件 处 理 器 应 该 首先 检查 readyState 的 值 和 HTTP 状态 。 当 
请 求 完成 加 载 (readyState 值 为 4) 并 且 响 应 已 经 完成 (HTTP 状态 为 OK) 时， 用户 就 可 以 调 
用 一 个 JavaScript 函数 来 处 理 该 响应 内 容 。 下 列 脚本 负责 在 响应 完成 时 检查 相应 的 值 并 调用 一 
个 processResponse() 方 法 。 


function processRequestO{ 
if(xmlHttpReq readyState—4){ 
if(xmlHttpReq.status==200){ 
PprocessResponse(); 
} 
} 


该 processResponse() 方 法 使 用 XMLHttpRequest 对 象 的 responseXML 和 responseText 属性 
来 检索 HTTP 响应 。 如 上 面 所 解释 的 ， 仅 当 响 应 的 媒体 类 型 是 text/xml、application/xml 或 以 
+xml 结尾 时 ， 这 个 responseXML 才 可 用 。 这 个 responseText 属性 将 以 普通 文本 形式 返回 响应 。 
对 于 一 个 XML 响应 ， 用 户 将 按 如 下 方式 检索 内 容 ， 代 码 如 下 。 


Var msg=xmlHttpReq.responseXML.: 


借助 于 存储 在 msg 变量 中 的 XML， 用户 可 以 使 用 DOM 方法 getElementsByTagName() 来 
检索 该 元 素 的 值 ， 代 码 如 下 。 


var catalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue: 


最 后 ,通过 更 新 Web 页 面 的 validationMessage div 中 的 HTML 内 容 并 借助 mnerHTML 属 
性 ， 用 户 可 以 测试 该 元 素 值 以 创建 一 个 要 显示 的 消息 ， 代 码 如 下 : 


这 catalogId 一 "valid"){ 
var validationMessage = document.getElementById("validationMessage"): 
validationMessage.innerHTML = "Catalog Id is Valid": 

} 

else 

{ 
var validationMessage = document.getElementById("validationMessage"): 
validationMessage.innerHTML = "Catalog Id is not Valid": 

} 
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22.3 CSS 与 Ajax 综合 实战 一 一 制作 自由 拖 动 的 网 页 


Ajax 综合 了 各 个 方面 的 技术 ， 不 但 能 够 加 快 用 户 的 访问 速度 ， 还 可 以 实现 各 种 特效 。 下 
而 就 制作 一 个 自由 拖 放 的 网 页 ， 来 巩固 CSS 与 Ajax 的 综合 使 用 。 具 体 的 操作 步骤 如 下 。 


0 在 HTML 页 面 中 创建 用 于 存放 数据 的 表格 ， 代 码 如 下 。 


<html> 
<head> 
<title> 能 够 自由 拖 动 布局 区 域 的 网 页 </title> 
</head> 
<body> 
<table cellspacing="4" width="100%" id="parentTable"> 
<tr> 
<td width="25%" valgin="top"> 
<table class="dragTable" cellspacing="0"> 
<tr><td> 蜂 蜜 </td></t> 
<tr><td> 蜂 蜜 ， 是 昆虫 蜜蜂 从 开花 植物 的 花 中 采 得 的 花蜜 在 蜂巢 中 酿 制 的 蜜 。 蜜 蜂 从 植 
物 的 花 中 采取 含水 量 约 为 80% 的 花蜜 或 分 泌 物 , 存 入 自己 第 二 个 胃 中 , 在 体内 转化 酶 的 作用 下 经 过 30 分 钟 的 
发 酵 , 回 到 蜂巢 中 吐出 , 蜂巢 内 温度 经 常 保持 在 35C 左 右 ， 经 过 一 段 时 间 , 水 份 蒸发 , 成 为 水 分 含量 少 于 20% 
的 蜂蜜 ， 存 贮 到 梨 洞 中 ， 用 蜂蜡 密封 。</td><tr> 
</table> 
<table class="dragTable" cellspacine="0"> 
<tr><td> 蜂 王浆 </td></tr> 
<tr><td> 蜂 王浆 (royal jelly) ， 又 名 蜂 皇 浆 、 蜂 乳 ， 蜂 王 乳 ， 是 蜜蜂 巢 中 培育 幼虫 的 青 
年 工蜂 咽 头 腺 的 分 泌 物 ， 是 供给 将 要 变 成 蜂王 的 幼虫 的 食物 。 蜂 王浆 是 高 蛋白 ， 并 含有 维生素 B 类 和 乙酰 胆 
碱 等 。 蜂 王浆 不 能 用 开水 或 茶水 冲服 ， 并 应 该 低温 贮存 。</td><tr> 
</table> 
</td> 
<td width="25%"> 
<table class="dragTable" cellspacing="0"> 
<tr><td> 蜂 花粉 </td></tr> 
<tr><td> 蜂 花粉 是 有 花 植物 雄 蕉 中 的 雄性 生殖 细胞 ， 它 不 仅 携带 着 生命 的 遗传 信息 ， 而 
且 包 含 着 孕育 新 生命 所 必需 的 全 部 营养 物质 ， 是 植物 传宗接代 的 根本 ， 热 能 的 源泉 。 蜂 花粉 是 由 蜜蜂 从 植物 
花 中 采集 的 花粉 经 蜜蜂 加 工 成 的 花粉 团 ， 被 誉 为 “全 能 的 营养 食品 ”、“ 浓 缩 的 天 然 药 库 ”、“ 全 能 的 营养 
库 ”、“ 内 服 的 化 妆 品 ”、“ 浓 缩 的 氨基 酸 ” 等 ， 是 “人 类 天 然 食 品 中 的 瑰宝 ”。</td><tr> 
</table> 
</td> 
<td width="25%"> 
<table class="dragTable" cellspacine="0"> 
<tr><td> 蜂 毒 </td></t>> 
<tr><td> 蜂 毒 是 一 种 透明 液体 ， 具 有 特殊 的 芳香 气味 ， 味 苗 、 呈 酸性 反应 ，pH 为 5.0 一 
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5.5， 比 重 为 1.1313。 在 常温 下 很 快 就 挥发 干燥 至 原来 液体 重量 的 30%~40%，</td><tr> 
</table> 
<table class="dragTable" cellspacine="0"> 


胶 100 一 150 克 ， 


<t><td> 蜂 胶 </td></a> 


<tr><td> 蜂 胶 是 蜜蜂 从 植物 芽孢 或 树干 上 采集 的 树脂 《树胶 ) ， 混 入 蜜蜂 口 器 中 腺 体 的 
分 小物 ,再 和 花粉 、 蜂 蜡 加 工 制 成 的 一 种 胶 状 物质 ， 是 蜂巢 的 保护 金 。 一 个 5 一 6 万 只 的 蜂 群 一 年 只 能 生产 蜂 


被 誉 为 “紫色 黄金 ”</td><tr> 


</table> 


</td> 


立信 (月 广 (查看 V) 必 硬 stAj。 工具 (D。 前 助 (H) 


站 HNUsersAdmirisratorDccuments243h 只 ”C X 上 | 总 让 芝 汉 过 记忆 区划 半 网 xx x 


蜂 宣 
蜂 密 ， 旺 昆 中 量 蜂 从 开花 植物 的 花 中 

有 得 的 刘 在 站 本 的 家 。 密 颖 

tt 是 花村 人 
中 ， 在 体内 生化 有 过 90 由 

钟 的 发 盱 ， et ， 生 内 纪 

主 度 经 党 保持 在 36C 太 

时 间 ， 水 份 蒸发 ， 成 为 EL 


20N 的 蜂 定 ， 生 及 到 玫 
和 上 采集 
到 的 eon 和 


~ 万 内 的 蜂 群 一 年 
i 补 当 为 “入 色 再 


术 利 恨 ， 并 应 该 从 温 喧 存 。 


22-4 制作 基本 页 面 表格 


tO3 为 页 面 添加 Ajax 的 JavaScript 代码 ， 以 及 CSS 样式 控制 ， 使 各 个 功能 模 

<style type="text/css"> 

<<!-- 

body{ 
font-size:12px: 
font-family:Arial. Helvetica, sans-serif: 
margin:Opx: padding:0px: 
/*background-color:#fFFfd5:*/ 
background-color:#e6ffda: 

} 

.dragTable{ 
font-size: 12px: 


块 能 自由 拖 放 。 
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AAs 


六 


Drag.ao.style.border="1px dashed red": 
Drag.tdiv.style.display="block": 
Drag.tdiv.style.position="absolute"; 
Drag.tdiv.style.filter="alpha(opacity=70)"; 
Drag.tdiv.style.cursor="move"; 
Drag.tdiv.style.border="1px solid #000000"; 
Drag.tdiv.style.width=Drag.ao.offsetWidth; 
Drag.tdiv.style.height=Drag.ao.offsetHeight: 
Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top; 
Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left: 
document.body.appendChild(Drag.tdiv): 
Drag.lastX=event.clientX: 
Drag.lastY=event.clientY : 
Drag.lastLeft=Drag.tdiv.style.left: 
Drag.lastTop=Drag.tdiv.style.top: 


draging:function(){// 判 断 MOUSE 的 位 置 


if(!Drag.draggedl|Drag.ao==nulDreturn: 
Var tX=event.clientX; 
Var tY=event.clientY; 
Drag.tdiv.style.left=parseInt(Drag.lastLeft)}+tX-Drag.lastX: 
Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY; 
for(var i=0:i<parentTable.cells.length:i++){ 
var parentCell=Drag.getInfo(parentTable.cells[i]): 
if\tX>=parentCell.left&&tX<=parentCell right&-&tY>=parentCell.top&&tY<=parentCell.bottom){ 
Var subTables=parentTable.cells[i].getElementsByTagName("table"): 
这 subTables.length 一 0){ 
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<= 
parentCell.bottom){ 
parentTable.cells[i].appendChild(Drag.ao); 


break: 
} 
for(var j=0:j<subTables.length:j++){ 
Var subTable=Drag.getInfo(subTables[j]): 
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<= 
subTable.bottom){ 
parentTable.cells[i].insertBefore(Drag.ao,subTables[j]): 
break: 
jelsef 
parentTable.cells[i].appendChild(Drag.ao): 


CSS 与 Ajax 的 综合 应 用 


第 22 澡 


} 


dragEnd:functionO{ 


六 


if(!Drag.dragged) 

return; 
Drag.dragged=false: 
Drag.mm=Drag.repos(150.15): 
Drag.ao.style.borderWidth="0px": 
//Drag.ao.style.border="1px solid #003a82"; 
Drag.ao.style.border="1px solid #206100"; 
Drag.tdiv.style.borderWidth="0px": 
Drag.ao.style.zIndex=1: 


getInfo:function(o){/ 取 得 坐标 


}， 


var to=new Object0O: 

to.left=to.Tight=to.top=to.bottom=0: 

var twidth=0.offsetWidth; 

Var theight=o.offsetHeight: 

while(o!=document.body){ 
to.left+=0.offsetLeft; 
to.top+=o.offsetTop: 
o=o.0ffsetParent: 

) 

to.right=to.left+twidth; 

to.bottom=to.top+theight: 

Tetum to: 


Tepos:function(aa.ab){ 


var f=Drag.tdiv.filters.alpha.opacity: 
Var tl=parseInt(Drag.getInfo(Drag.tdiv).left); 
var tt=parseInt(Drag.getInfo(Drag.tdiv).top): 
Var kl=(tl-Drag.getInfo(Drag.ao).left)/ab: 
Var kt=(tt-Drag.getInfo(Drag.ao).top)/ab:; 
Var kf=f/ab; 
return setInterval(function|){ 
iab<1)f 

clearInterval(Drag.mm); 

Drag.tdiv.removeNode(true): 

Drag.ao=null: 

Teturmn: 
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9 
ab--; 
tl-=kl: 
t= 
f=kf: 
Drag.tdiv.style.left=parseInt(t)+"px": 
Drag.tdiv. style.top=parseInt(tt)+"px"; 
Drag.tdiv.filters.alpha.opacity=£: 
} 
,aa/ab) 
上 
inint:functionO{ 
for(var i=0;i<parentTable.cells.length:i++){ 
var subTables=parentTable.cells[i].getElementsByTagName("table"): 
for(var j=0:j<subTables.length:j++){ 
if(subTables[j].className!="dragTable") 
break: 
subTables[j].rows[0].className="dragTR": 
subTables[j].rows[0].attachEvent("onmousedown".Drag.dragStart): 
} 
document.onmousemove=Drag.draging; 
document.onmouseup=Drag.dragEnd: 
} 
} 
Drag.inintO: 
</script> 


使 用 下 9.0 浏览 器 浏览 的 效果 如 图 22-5 所 示 。 


eo 闻 HUsersAd of\Documents2 月 -上 X | E Sans x | 
六 (E)】 本 看 V) 次 训 (A) 


22-5 ”自由 拖 放 布 局 区 域 
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22.4 专家 解 惑 


1. 在 发 送 Ajax 请 求 时 ， 是 使 用 GET 还 是 POST? 

与 POST 相 比 ，GET 更 简单 也 更 快 ， 并 且 在 大 部 分 情况 下 都 能 用 。 然 而 ， 在 以 下 情况 中 ， 
请 使 用 POST 请 求 : 

@ 无 法 使 用 缓存 文件 (更 新 服务 器 上 的 文件 或 数据 库 )。 

@ 向 服务 器 发 送 大 量 数据 (POST 没有 数据 量 限制 )。 

@ 发 送 包 含 未 知 字符 的 用 户 输入 时 ，POST 比 GET 更 稳定 、 更 可 靠 。 

2. 在 指定 Ajax 的 异步 参数 时 ， 应 将 该 参数 设置 为 True 还 是 False? 

Ajax 指 的 是 异步 JavaScript 和 XML ( Asynchronous JavaScript and XML ) 。 


XMLHttpRequest 对 象 如 果 要 用 于 Ajax， 其 open0 方 法 的 async 参数 必须 设置 为 tue， 代 码 如 
下 ， 


Xmlhttp.open("GET"."ajax_test.asp",true): 


对 于 Web 开发 人 员 来 说 ， 发 送 异步 请 求 是 一 个 巨大 的 进步 。 很 多 在 服务 器 端 执行 的 任务 
都 相当 费时 。Ajax 出 现 之 前 ， 可 能 会 引起 应 用 程序 挂 起 或 停止 。 通 过 AJAX，JavaScript 无 需 
等 待 服务 器 的 响应 ， 而 是 在 等 待 服务 器 响应 时 执行 其 他 脚本 ， 当 响应 就 绪 后 对 响应 进行 处 理 。 


第 23 章 
< 构建 企业 门户 网 站 


-个 公司 的 网 站 是 这 个 公司 形象 的 体现 , 其 中 也 包含 着 整个 公司 的 理念 和 方向 。 这 种 网 站 


简约 而 不 简单 ， 没 有 过 多 的 颜色 修饰 ， 大 气 的 整体 风格 是 最 重要 的 。 
23.1 构思 布局 


本 实例 是 模拟 一 个 小 型 软件 公司 的 网 站 , 公司 主要 承接 电信 方面 的 各 种 加 
言 息 和 联系 我 们 等 栏目 。 页 面 中 采用 红色 和 和 白色， 红色 部 儿 


包括 首页 、 产 品 信息 、 客户 人 
航 菜单 ， 白 色 部 分 显示 文本 信息 。 在 正 9.0 中 浏览 效果 如 图 23-1 所 示 。 


的 特点 是 


次 件 项 目 。 网 站 上 
显示 导 


YOUR LOGO COMPANY 


计算 机 网 站 


疾 理 来 并 我 们 的 网 站 


图 23-1 计算 机 网 站 首页 


23.1.1 设计 分 析 
作为 一 个 软件 公司 的 网 站 首页 ， 其 页 面 应 简单 、 明 了 , 给 人 以 清晰 的 感觉 。 页 头 部 分 主要 
其 中 Logo 可 以 是 一 张 图 片 或 者 文本 信息 ; 页面 主体 分 为 


放置 导航 菜单 和 公司 Logo 信息 等 ， 
两 个 部 分 , 页 面 主体 左 侧 是 公司 介绍 , 对 于 公司 介绍 可 以 在 首页 上 进行 概括 性 描述 ; 页 面 主体 
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右 侧 是 新 闻 、 产 品 和 客户 信息 等 ,其 中 产品 和 客户 的 链接 信息 以 列表 形式 显示 ， 也 可 以 通过 页 
面 项 部 导航 菜单 进入 相应 的 介绍 页 面 。 

对 于 网 站 的 其 他 子 页 面 ,篇 幅 可 以 比较 短 , 重点 介绍 软件 公司 的 业务 、 联 系 方式 、 产 品 信 
息 等 ， 页 面 需要 与 首页 风格 相同 。 


23.1.2 ”排版 架构 


从 图 23-1 可 以 看 出 ， 页 面 采用 的 是 上 中 下 结构 ， 页 面 主体 部 分 又 柑 套 了 一 个 左右 版 式 结 
构 。 其 大 致 结构 如 图 23-2 所 示 。 


页 头 部 分 
页 面 主体 


左 侧 || 中间 | | 右 侧 
列表 || 列表 || 列表 


页 脚 部 分 


图 23-2 页 面 总 体 框架 


在 HTML 页 面 中 , 通常 使 用 DIV 层 对 应 上 面 不 同 的 区 域 , 可 以 是 一 个 DIV 层 对 应 一 个 区 
域 ， 也 可 以 是 多 个 DIV 层 对 应 同一 个 区 域 。 本 实例 的 DIV 代码 如 下 所 示 。 


<div id="container">/* 页 面 布局 容器 */ 
<div id="top"> 

</div><!--end top--> 

<div id="header"> 

</div><!--end header--> 

<div id=me>/* 导 航 菜单 */ 

</div> 

<div id="content"> 

<div id="text">/* 页 面 主体 左 侧 内 容 */ 
</div><!--end text--> 

<div id="column">/* 页 面 主体 右 侧 内 容 */ 
</div><!--end column--> 
</div><!--end content--> 

<div id="footer">/* 页 脚 部 分 六 
</div><!--end footer--> 

</div><!--end container--> 


在 上 面 的 代码 中 ，ID 名 称 为 container 的 层 是 整个 页 面 的 布局 容器 ， 层 top、 层 header 和 
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层 me 共同 组 成 了 页 头 部 分 ， 层 top 用 于 显示 页 面 logo， 层 header 用 于 显示 页 头 文本 信息 ， 层 
me 用 于 显示 页 头 导 航 菜单 信息 。 页 面 主体 是 content 层 ， 其 包含 了 两 个 层 ，text 层 和 column 
层 ，text 层 是 页 面 主 体 左 侧 内 容 ， 显 示 公 司 介绍 信息 ; column 层 是 页 面 主体 右 侧 内 容 ， 显 示 公 
司 常用 的 导航 链接 。 层 footer 是 页 脚 部 分 ， 用 于 显示 版 权 信息 和 地 址 信息 。 

在 CSS 文件 中 ， 层 container 和 层 content 对 应 的 CSS 代码 如 下 所 示 。 


#container 

{ 
margin: Opt auto; 
width: 770px: 
position: relative: } 

#content { 
background: transparent Url(images/content.gif) Tepeat-y: 
clear: both:; 
margin-top: SPX: 
width: 770px; 

} 


在 上 面 的 代码 中 ，#container 选择 器 定义 了 整个 布局 容器 的 宽度 、 外 边 距 和 定位 方式 。 
#content 选择 器 定义 了 背景 图 片 、 宽 度 和 顶部 边 距 。 
23.2 ”模块 分 割 
当 页 面 整 体 架 构 完成 后 ， 就 可 以 动手 制作 不 同 的 模块 区 域 了 。 其 制作 流程 采用 自 上 而 下 
从 左 到 右 的 顺序 。 然 后 再 对 页 面 样式 进行 整体 调整 。 
23.2.1 Logo 与 导航 菜单 


一 般 情况 下 ,Logo 信息 和 导航 菜单 都 放 在 页 面 顶 部 ， 作 为 页 头 部 分 。 其 中 Logo 信息 作为 
公司 标志 , 通常 放 在 页 面 的 左上 角 或 右上 角 ; 导航 菜单 放 在 页 头 部 分 和 页 面 主体 两 者 之 间 , 用 
于 链接 其 他 的 页 面 。 在 下 9.0 中 浏览 效果 如 图 23-3 所 示 。 


YOUR LOGO COMPANY 


计算 机 网 站 


图 23-3 ”页面 Logo 和 导航 菜单 
在 HTML 文件 中 ， 用 于 实现 页 头 部 分 的 HIML 代码 如 下 所 示 。 


<div id="top"> 
</div><!--end top--> 
<div id="header"> 


在 上 面 的 代码 中 , 层 top 用 于 显示 页 面 logo， 层 header 用 于 显示 页 头 的 文本 信息 ， 如 公司 
名 称 ; 层 me 用 于 显示 页 头 导 航 菜单 。 在 层 me 中 ， 有 一 个 无 序列 表 ， 用 于 制作 导航 菜单 ， 每 
个 选项 都 是 由 超级 链接 组 成 的 。 

在 CSS 样式 文件 中 ， 对 应 上 面 标记 的 CSS 代码 如 下 所 示 。 
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font-size: 1.2em: 
color: reb(223, 139. 139): 
} 
ul#menu { 
margin: Opt; 
} 
#menulif{ 
list-style-type: none: 
float: left: 
text-align: center: 
width: 104px; 
margin-right: 3px; 
font-size: 1.05em; 
} 
#menua{ 
background: transparent url(images/menu.gif) no-repeat: 
overflow: hidden:; 
display: block: 
height: 28px: 
padding-top: 3px; 
text-decoration: none; 
twidth: 100%; 
font-size: lem; 
font-family: Verdana,"Geneva CE",lucida,sans-serif: 
color: rgb(255, 255, 255); 
} 
#menu li > a, #menu li > strong { 
width: auto; 
} 
#menu a.actual { 
background: transparent url(images/menu-actual.gif) no-repeat: 
color: rgb(149, 32, 32): 
: 
#menu a:hover { 
color: rgb(149, 32, 32): 
} 


在 上 面 的 代码 中 ，#top 选择 器 定义 了 背景 图 片 和 层 高 ; 元 eader 定义 了 背景 图 片 、 高 度 和 
顶部 外 边 距 ; #menu 层 定 义 了 层 定位 方式 和 坐标 位 置 。 其 他 选择 器 分 别 定义 了 上 面 3 个 层 中 元 
素 的 显示 样式 ， 如 段落 显示 样式 、 标 题 显示 样式 和 超级 链接 样式 等 。 
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23.2.2 ” 左 侧 文本 介绍 


在 页 面 主体 中 , 其 左 侧 部 分 主要 介绍 公司 相关 信息 。 左 侧 文 本 采用 的 是 左 浮动 并 且 固定 宽 
度 的 版 式 设 计 ， 重 点 在 于 调节 宽度 使 不 同 浏览 器 之 间 能 够 效果 一 致 ， 并 且 颜 色 与 Logo 和 左 侧 


的 导航 菜单 相 匹配 ， 使 整个 网 站 和 谐 、 大 气 。 在 正 9.0 中 浏览 效果 如 图 23-4 所 示 。 


欢迎 来 到 我 们 的 网 站 

远大 公司 成 立 于 1998 年 ， 注 册 资本 
1700 万 元 。 是 国家 认定 的 高 新 技术 企 
业 、 软 件 企业 ， 是 专业 的 电信 系统 仿 软 
件 和 应 用 服务 供应 商 。 

公司 坚持 走 自立 创新 、 稳 步 发 展 的 
道路 ， 以 创立 品牌 为 自己 的 基本 策略 ， 
以 产品 自身 的 品质 ， 先 进 的 技术 和 良好 
的 服务 取信 于 用 户 。2002 年 至 今 公司 先 
后 有 多 个 软件 产品 获得 了 河南 省 信息 产 
业 打 颁 发 的 《软件 产品 登记 证 书 》 和 国 


家 版 权 局 颁发 的 《软件 著作 权 登 记 证 
书 ) 。 ER 也 得 到 


并 A 0 
发 的 509001:2008 质 量 管理 体系 认证 证 书 。 


图 23-4 页 面 左 侧 文本 介绍 
在 HTML 文件 中 ， 创 建 页 面 左 侧 内 容 介绍 的 代码 如 下 所 示 。 


<div id="content"> 

<div id="text"> 

<h3 class="headlines"><a hre 合 "#" title="testing"> 欢 迎 来 到 我 们 的 网 站 </a></h3> 

<p><img src="images/fotos.jpg" alt="fotos" align="right" /> 

远大 公司 成 立 于 1998 年 ， 注 册 资 本 1700 万 元 。 是 国家 认定 的 高 新 技术 企业 、 软 件 企 业 ， 是 专业 的 电信 
系统 仿 软件 和 应 用 服务 供应 商 。</p><p> 

公司 坚持 走 自立 创新 、 稳 步 发 展 的 道路 ， 以 创立 品牌 为 自己 的 基本 策略 ， 以 产品 自身 的 品质 ， 先 进 的 技 
术 和 良好 的 服务 取信 于 用 户 。2002 年 至 今 公司 先后 有 多 个 软件 产品 获得 了 河南 省 信息 产业 厅 颁 发 的 《软件 产 
品 登记 证 书 》 和 国家 版 权 局 颁发 的 《软件 著作 权 登 记 证 书 》。 同 时 远大 的 进步 和 发 展 ， 也 得 到 了 政府 部 门 的 
大 力 支 持 和 关注 ， 获 得 国家 科技 部 和 省 、 市 政府 部 门 技术 创新 基金 无 偿 资助 百 余 万 元 。 并 正式 获得 中 国 质量 
体系 认证 中 心 颁发 的 ISO9001:2008 质量 管理 体系 认证 证 书 。 

</p> 

<p>&nbsp:</p> 

</div><!--end text--> 

</div> 


在 上 面 的 代码 中 ， 层 content 是 页 面 主体 ， 层 text 是 页 面 主体 中 左 侧 部 分 。 层 text 包含 标 
题 和 段落 信息 ， 段 落 中 包含 一 张 图 片 。 
在 CSS 文件 中 ， 针 对 上 面 HTML 标记 的 CSS 代码 如 下 所 示 。 
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Htext { 


background: rgb(255, 255, 255) url('text-top.gif) no-repeat: 


width: 518px; 
color: rgb(0, 0. 0): 
float: left; 
} 
#text h1, #text h2, #text h3, #text h4 { 
color: rgb(140, 9. 9): 
} 
#text h3.headlines a { 
color: rgb(140. 9. 9): 
} 


在 上 面 的 代码 中 ，#text 层 定义 了 背景 图 片 、 背 景 颜色 、 字 体 颜色 和 页 面 左 浮动 。 下 面 的 
选择 器 定义 了 标题 显示 样式 ， 如 字体 颜色 等 。#text h3.headlines a 选择 器 定义 了 标题 3、 类 


headlines 和 超级 链接 显示 样式 。 
23.2.3 ” 右 侧 导 航 链接 


在 页 面 主体 右 侧 部 分 中 ,其 文本 信息 不 是 太 多 ,但 非常 重要 ,是 首页 用 了 


链接 其 他 页 面 的 


导航 链接 ， 如 客户 详细 信息 、 最 新 消息 等 。 同 样 右 侧 版 式 需要 设置 为 固定 宽度 并 且 向 左 浮动 的 


版 式 。 在 IE 9.0 中 浏览 页 面 效果 如 图 23-5 所 示 。 


23-5 页 面 右 侧 的 超级 链接 


从 图 23-5 可 知 ， 需 要 包含 几 个 无 序列 表 和 标题 ， 其 中 列表 选项 为 超级 链接 。HTML 文件 


中 用 于 创建 页 面 主体 右 侧 版 式 的 代码 ， 如 下 所 示 。 


<div id="column"> 
<h3><span> 最 新 消息 </span></h3> 
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| 


<ul class="category_list"><li><a hre 伍 "#"> 公 司 组 织 员工 连云港 旅游 </a></li> 
<li><a hre 人 ="#">2011 员工 乒乓 球 大 赛 开幕 </a></li> 

<li><a href="#"> 公 司 总 经 理会 见 实习 大 学 生 </a></li> 

<li><a href="#"> 公 司 销售 部 门 再 传 捷报 </a></li></ul> 
<h3><span> 产 品 展示 </span></h3> 

<ul class="recent_articles"><li><a hre 人 ~"#"> 在 线 人 员 素 质 考核 系统 </a></li> 
<li><a href="#"> 线 损 计算 机 系统 </a></li> 

<li><a href="#"> 质 量 运用 管理 系统 </a></li></ul> 
<h3><span> 客 户 </span></h3> 

<ul class="wet_recent_comments"><li><a hre 仁 "#"><cite> 华 中 地 区 </cite></a><p> 河 南 地 区 </p></li> 
<li><a hre 全 ="#"><cite> 华 东 地 区 </cite></a><p> 上 海地 区 </p></li></ul> 
</div><!--end column--> 

<div id="content-bottom">&nbsp:</div> 


在 上 面 的 代码 中 创建 了 两 个 层 ， 分 别 为 column 层 和 content-bottom 层 。 其 中 column 层 用 
显示 页 面 主体 中 的 右 侧 链接 ， 并 包含 了 3 个 标题 和 3 个 超级 链接 。content-bottom 层 用 于 消 


干 后 


除 上 一 层 的 浮动 效果 。 


在 CSS 文件 中 ， 用 于 修饰 上 面 HTML 标记 的 CSS 代码 如 下 所 示 。 


#column { 
background: rgb(142, 14, 14) url(images/column.gif) no-repeat: 
float: Tight: 
width: 247px: } 
#column p { font-size: 0.7em: } 
#column ul { font-size: 0.8em: } 
#column h3 { 
background: transparent url(images/h3-column.gif) no-repeat: 
position: relative; 
left: -18px: 
height: 26px: 
width: 215px: 
margin-top: 10px: 
padding-top: 6px: 
padding-left: 6px: 
font-size: 0.9em:; 
z-index: 1: 
font-family: Verdana,"Geneva CE".lucida.sans-serif 
} 
#column h3 span { margin-left: 10px: } 
#column span.name { 
text-align: right: 
color: Tgb(223. 58. 0): 
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margin-right: SpX: 

} 

#column a { color: reb(255, 255. 255); } 

#column a:hover { color: rgb(80, 210. 122): } 

p-comments { 

text-align: right: 

font-size: 0.8em; 

font-weight: bold: 

padding-right: 10px; 
= 

#content-bottom { 

background: transparent url(images/content-bottom.gif) no-repeat scroll left bottom: 
clear: both: 

display: block: 

width: 770px; 

height: 13px: 

font-size: Opt: 

} 

在 上 面 的 代码 中 ，#column 选择 器 定义 背景 图 片 、 背 景 颜色 、 页 面 右 浮动 和 宽度 。 
#content-bottom 选择 器 定义 背景 图 片 、 宽 度 、 高 度 、 字 体 大 小 和 以 块 显示 ， 并 且 使 用 clear 消 
除 前 面 层 使 用 float 的 影响 。 其 他 选择 器 主要 定义 column 层 中 其 他 元 素 的 显示 样式 ， 如 无 序列 
表 样式 、 列 表 选 项 样式 和 超级 链接 样式 等 。 

23.2.4 ”版 权 信息 


版 权 信息 一 般 放置 在 页 面 底部 ， 用 于 介绍 页 面 的 作者 、 地 址 信息 等 ， 是 页 脚 的 一 部 分 。 页 
脚 部 分 和 其 他 网 页 部 分 一 样 ， 需 要 保持 简单 、 清 晰 的 风格 。 在 正 9.0 中 浏览 效果 如 图 23-6 所 


不 。 


图 23-6 页 脚 部 分 

从 图 23-6 可 以 看 出 ， 页 脚 部 分 非常 简单 ， 只 包含 了 一 个 作者 信息 的 超级 链接 ， 因 此 设置 
起 来 比较 方便 ， 其 代码 如 下 。 

<div id="footer"> 

<p id="ivorius"><a hre 合 "#"> 网 页 设计 者 : 李 四 工作 室 </a></p> 

</div><!--end footer--> 

在 上 面 的 代码 中 ， 层 footer 包含 了 一 个 段落 信息 ， 其 中 段落 的 id 是 ivorius。 

在 CSS 文件 中 ， 用 于 修饰 上 面 HTML 标记 的 样式 代码 如 下 所 示 。 


#footer { 
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background: transparent Url(images/footerpng') no-repeat scroll left bottom: 
margin-top: Spx: 
padding-top: 2px: 
height: 33px: 
} 
#footer p { text-align: center: } 
#footer a { color: reb(255, 255, 255): } 
#footer a:hover { color: reb(223, 58, 0); } 
p#ivorius { 
float: Tight: 
margin-right: 13px; 
font-size: 0.75em; 
8 
p#ivorius a { color: rgb(80, 210, 122): } 


在 上 面 的 代码 中 ，#footer 选择 器 定义 了 页 脚背 景 图 片 、 内 外 边 距 的 顶部 距离 和 高 度 。 其 


他 选择 器 定义 了 页 脚 部 分 文本 信息 的 对 齐 方式 、 超 级 链接 样式 等 。 


23.3 ”整体 调整 


前 面 完成 了 首页 中 不 同 部 分 的 制作 ,其 整个 页 面 基本 上 都 已 经 成 形 。 在 制作 完成 后 ,需要 


根据 页 面 实 际 效果 做 一 些 细节 上 的 调整 ， 从 而 完善 页 面 整体 效果 。 例 如 ， 各 块 之 间 的 padding 
和 margin 值 是 否 与 页 面 整体 协调 ， 各 个 子 块 之 间 是 否 协 调 统一 等 。 在 页 面 调整 前 ,在 了 9.0 
中 浏览 效果 如 图 23-7 所 示 。 


从 图 23-7 中 ， 可 以 发 现 页 面 段落 没有 缩 进 ， 页 面 右 侧 列表 选项 之 间距 离 太 小 。 这 时 可 以 


利用 CSS 属性 调整 ， 其 代码 如 下 所 示 。 


YOUR LOGO COMPANY 


图 23-7 页 面 调整 前 的 效果 
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Pp { margin: 0.4em 0.5em:; font-size: 0.85em:text-indent:2em; } 

a { color: rgb(25, 126, 241): text-decoration: underline: } 

a:hover { color: rgb(223. 58, 0): text-decoration: none: } 

a img { border: medium none ; } 

ul, ol { margin: 0.5em 2.Sem: } 

h2 { margin: 0.6em Opt 0.4em 0.4em: } 

h3, h4, hs { margin: lem Opt 0.4em 0.4em: } 

* {margin: Opt; padding: Opt: } 

body { background: rgb(61. 62, 63) url(images/body.gif) repeat color: white: font-size: lem: font-family: 
"Trebuchet MS",Tahoma,"Geneva CE",lucida; } 


在 上 面 的 代码 中 ， 全 局 选择 器 “*” 设 置 了 内 外 边 距 距 离 ，body 标记 选择 器 设置 了 背景 颜 
色 、 图 片 、 字 体 大 小 、 字 体 颜色 和 字形 等 。 其 他 选择 器 分 别 设置 了 段落 、 超 级 链接 、 标 题 和 列 
表 等 样式 信息 。 


23.4 专家 解 惑 


1. Firefox 和 IE 浏览 器 如 何 处 理 负 边 界 问题 ? 

在 正 中 , 超出 父 元 素 的 部 分 会 被 父 元 素 覆 盖 ， 而 在 Firefox 中 ， 超 出 父 元 素 的 部 分 会 覆盖 
父 元 素 , 但 前 提 是 父 元 素 有 边框 或 内 边 距 , 不然 负 边 距 会 显示 在 父 元 素 上 , 使 得 父 元素 拥 有 人 负 
边 距 。 在 进行 网 页 设计 时 ， 针 对 上 面 的 情况 可 以 对 元 素 进行 相对 定位 。 

2. 在 定义 子 元 素 的 上 边 距 时 ， 如 果 超 出 元 素 高 度 ， 应 怎么 处 理 ? 


在 正 浏 览 器 中 , 子 元 素 上 边 距 显示 正常 ， 而 在 Firefox 浏览 器 中 , 子 元 素 上 边 距 显示 在 父 
元 素 上 方 。 其 解决 办 法 是 在 父 元 素 中 增加 overflow:hidden 语句 或 给 父 元 素 增加 边框 或 内 边 距 。 


第 24 章 
< 团购 商务 类 网 站 的 设计 > 


电子 商务 网 站 类 型 较 多 , 本 实例 以 当下 比较 流行 的 团购 类 网 站 为 例 进行 介绍 。 团购 这 一 名 
词 是 最 近 几 年 才 出 现 的 , 有 关 团 购 的 商业 类 网 站 也 如 雨后春笋 般 迅 速 火 爆 起 来 。 比 较 有 名 的 团 
购 网 站 有 聚 划算 、 窜 窜 团 、 拉 手 网 、 美 团 网 等 。 


ED . I 


团购 网 根据 薄利 多 销 、 量 大 价 优 的 原理 , 将 
大 量 的 散户 聚集 起 来 ， 共 同 购买 一 件 或 多 件 商 
品 。 这样， 商家 可 以 快速 处 理 大 批量 的 商品 ， 低 
价 销售 ， 以 量 牟 利 。 而 对 于 购买 者 来 说 ， 可 以 以 
远 远 低 于 市 场 单 品 的 价格 购 得 满意 的 商品 , 有 的 
甚至 低 于 批发 价格 。 这 极 大 地 促进 了 市 场 的 交易 
能 力 。 

本 实例 就 来 制作 一 个 典型 的 团购 类 网 页 , 最 
终 效果 如 图 24-1 所 示 。 


24.1.1 整体 设计 分 析 


团购 网 站 已 经 成 为 典型 , 在 设计 这 类 网 站 时 
应 当 体现 出 以 下 几 点 。 


@ 涉及 面 广 : 团购 网 站 本 身 的 面向 对 象 没 
有 特殊 的 限制 ， 任 何 具有 一 定 消费 群体 
的 商品 都 可 以 出 现在 团购 网 站 上 ， 所 以 
一 个 团购 网 站 本 身 就 应 该 涉及 生活 的 方 
方面 面 ， 以 方便 浏览 者 访问 所 需要 的 类 
别 。 

@ 考虑 区 域 性 : 很 多 和 生活 较 贴近 的 团购 
内 容 (如 饮食 )， 有 明显 的 地 区 性 限制 ， 
一 般 只 能 让 当地 人 去 团购 ， 所 以 团购 中 应 该 有 区 域 选择 的 模块 。 


图 24-1 团购 网 页 面 效果 
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@ 展示 最 新 商品 : 团购 网 站 贴近 生活 ， 每 天 都 有 可 能 有 新 的 商家 发 布 团 购 信 息 ， 而 这 些 
信息 往往 都 是 浏览 者 比较 关注 的 内 容 。 所 以 要 在 页 面 的 主体 位 置 使 用 大 块 区 域 显 示 最 
新 的 团购 信息 ， 并 配置 详细 的 图 文 信息 。 

@ 数量 登记 : 团购 网 站 之 所 以 能 够 成 团 ， 并 非 随便 几 个 人 购买 就 可 以 ， 人 数 太 少 对 商家 
来 说 有 损失 ， 因 此 团购 商品 一 般 都 有 人 数 限制 ， 达 到 指定 人 数 后 才 可 成 团 。 所 以 商品 
要 有 参 团 人 数 登 记功 能 ， 并 且 将 参 团 信息 展示 给 新 的 浏览 者 。 

@ 友情 帮助 : 团购 网 站 不 是 简单 的 浏览 型 网 站 ， 而 是 具有 网 络 电子 商务 功能 的 网 站 ， 所 
有 的 浏览 者 都 需要 按照 电子 商务 平台 的 流程 和 规范 进行 操作 ， 因 此 对 于 一 些 常规 的 操 
作 事 项 要 提供 帮助 连接 。 

@ 格调 温馨 : 团购 网 站 面向 的 对 象 是 普通 大 众 ， 要 提供 的 应 该 是 值得 信赖 的 优质 团购 信 
息 和 服务 ， 所 以 团购 网 站 的 风格 要 温馨 、 大 气 。 


每 一 家 团购 网 站 都 有 自己 的 特色 。 以 上 分 析 内 容 只 是 一 般 团购 网 站 应 当 具 备 的 基本 功能 。 
具体 的 个 性 化 设计 需要 各 自 团购 公司 的 创意 。 而 本 实例 就 依照 上 述 的 基本 功能 来 制作 一 个 简单 
的 团购 商业 类 网 页 。 

24.1.2 ”架构 布局 分 析 


本 实例 网 站 采用 的 是 典型 的 上 中 下 结构 , 中 间 又 可 以 分 为 左右 结构 。 整体 的 排版 架构 如 图 
24-2 所 示 。 


网 页 头 部 

网 页 主体 
侧 
主体 左 侧 边 
栏 

网 页 底部 


24-2 ”网 页 布局 


电子 商务 类 网 站 所 要 实现 的 功能 较 多 ， 模 块 组 成 相对 也 比较 多 。 依 照 网 页 的 上 中 下 结构 ， 
模块 组 成 如 下 。 


1. 网 页 头 部 
网 页 头 部 包括 网 页 logo 模块 、 信 息 搜索 模块 和 导航 菜单 栏 模 块 。 最 终 效果 如 图 24-3 所 示 。 
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里 团 精 挑 细 [VM 搜索 一 


阿里 商城 ”团购 精 选 ” 美食 ” 娱乐 ”电器 。 美容 保 键 ”生活 服务 。 训 行 


4 类 : TET tas il myo 
区 县 : EE :+yE sz， =tE cs 


出 口 加 I 区 B) 巩义 市 6) 裔 


酒店 9254) 网购 2341) 


ESE ues mnfrxEe 


图 24-3 ”网 页 头 部 
2. 网 页 主体 
网 页 主体 内 容 较 多 ,主要 包括 团购 分 类 及 区 域 选 择 模 块 、 最 新 团购 商品 展示 模块 、 热 门 分 
类 模块 、 热 销 商品 排行 模块 和 热门 城市 索引 模块 ， 如 图 24-4 所 示 。 


米线 开放 


国信 如 人 效 


热门 分 类 


ET 


热 销 商品 排行 杨 


【多 店 通用 米 姥 王者 ! 仅 39.9 元 ! 京 奈 价 82 元 多 仅 43 元 ， 训 原价 39 元 米内 世家 中 多 家 店 江 内 白 
局 米线 双人 套 -， 助 午 申 餐 通用 秀 1 人 议 ! 


¥39.9 ,= 已 yx43 ,。 Es 


Ye2 0 人 BR 95EE 加 人 已 购买 9 En 


1864 人 9 


也 以 保全 村 


mE 


【3 店 通用 ]】 仅 46 元 ! 京 痢 价 72 元 的 蓝 资 火锅 双 仅 B5 元 。 享 原价 376 小 品 WEEK 人 


¥46 。v 85., < 


【过 只 醒 〗】 仅 29.9 元 ， 宰 及 高 原价 59 元 『 宫 征 烤 【时 高 广场 了 仅 24 


内 4 自助 午 符 1 人 次 ! 右 票 ] 张 ! 
¥29.9 .。 BR ¥20.5.. E 


热门 市: 北京 四。 评 划 国 阳 。 无 犁 了 天竺 四 99。 AJ。 区 下 团 虽 。 区 HE33 。 石 第 隐 二 都 史上 阁 本 中 南 豆 团 罗 长 窗 可 中 
再 安放。 厂 州 妤 9 顶 Hj5 和 5 百 呈 9 大王 FF 隐 地 法 9 示 首 F 移 二 拓 印 了 9 六 这 的 。 后 门 团 昌 。 中 条 SB 全 It 


图 24-4 网 页 主体 
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3. 网 页 底部 
底部 主要 是 客户 服务 和 快捷 链接 模块 ， 用 于 解决 各 种 客户 服务 问题 ， 如 图 24-5 所 示 。 


用 户 帮 助 获取 更 新 商务 合作 公司 信息 24 小 时 服务 热 绪 
玩 转 阿里 阿里 团 新 省 微 博 商家 入 驻 关于 委 们 500-000-0000 
征 见 问题 阿里 团 开心 网 主页 提供 团 隐 信息 媒人 报道 -00.0000 
亏欠 规则 同 里 田 豆 名 小 姐 友情 链接 加 入 我 们 
积分 规则 HSs 订 阅 开放 API 隐私 声明 我 要 提问 
消费 者 保障 手机 版 下 载 用 户 协议 
网 站 地 图 

图 24-5 网 页 底部 


主要 使 用 DIV 来 实现 各 个 模块 的 分 割 ， 其 代码 如 下 。 


<div id=headmin> </div> 

/网 页 头 部 

<div id=headnav> </div> 

// 导 航 菜单 栏 

<div class="dhnav_box dhnav box index clearfix "> </div> 
/网 页 主体 一 一 团购 分 类 及 区 域 选择 

<div class=con_boxindex> </div> 

/网 页 主体 一 一 最 新 团购 商品 展示 及 右 侧 边栏 
<div class=hot city> </div> 

/热门 城市 链接 

<div id=footer> </div> 

/网 页 底部 


24.2 主要 模块 设计 


网 站 制作 要 逐步 完成 ， 本 实例 中 网 页 制作 主要 包括 7 个 部 分 ， 详 细 制 作 方法 如 下 。 
24.2.1 样式 代码 分 析 


首先 ， 网 页 设计 中 需要 使 用 CSS 样式 表 控 制 整体 样式 ， 所 以 网 站 可 以 使 用 以 下 代码 结构 
实现 页 面 代码 框架 和 CSS 样式 的 插入 。 

<html><head><title> 阿 里 团 </title> 

<meta name=keywords content=" 阿 里 团 "> 

<link rel=stylesheet type=text/css href—="css/css.css"> 

<script type=text/javascript src="js/user.js"></script> 

</head> 

<body> 
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由 以 上 代码 可 以 看 出 ， 案 例 中 使 用 了 一 个 CSS 样式 表 css.css。 其 中 包含 网 页 通用 样式 及 
特定 内 容 的 样式 。 样 式 表 内 容 如 下 。 


html { 
font-family: tahoma, verdana, arial, sans-serif, "宋体 ": background: #f3eded:; color: #000 


} 
body { 

background: #f3eded 
} 
body { 

padding-bottom: Opx; margin: Opx; padding-left: 0px: padding-right: Opx:; padding-top: Opx 
} 
div { 

padding-bottom: Opx; margin: Opx; padding-left: Opx; padding-right: Opx; padding-top: Opx 
} 
df 

padding-bottom: Opx: margin: Opx; padding-left: Opx; padding-right: Opx; padding-top: Opx 
} 


0 

#sp_nav _list .fenlei .sec ul { 

border-bottom: #eeeeee 1px solid; border-left: #eeeeee lpx solid: padding-bottom: Opx; margin: Opx 0 
px 10px 44px: padding-left: Opx: width: 880px; padding-right: Opx; background: #f8f8f8; border-top: #eeeeee 

lpx solid; border-right: #eeeeee 1px solid; padding-top: Spx 

} 

#sp nav list .fenlei .sec ul li { 

padding-bottom: Spx 

} 

#imsglogin { 

display: none 


图 本 实例 中 的 样式 表 比 较 多 ， 这 里 只 展示 一 部 分 ， 可 参考 下 载 资源 中 的 代码 。 
上 


24.2.2 ”网 页 顶部 代码 分 析 
网 页 头 部 包括 网 页 logo 模块 、 信 息 搜 索 模块 、 导 航 菜单 栏 模块 。 本 实例 中 网 页 头 部 的 效 
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果 如 图 24-6 所 示 。 
于 团 精 挑 细 选 【 切 热 城市 ] 搜索 帮助 


阿里 商城 。” 团购 精 选 ”美食 ”娱乐 ”电器 二 二 


图 24-6 ”网 页 头 部 
实现 网 页 头 部 的 详细 代码 如 下 所 示 。 


<ul> 
<li class=seach> 
<div class=soso> 
<form id=soso_form method=post action=/g/search><input id=querystring 
value= 搜 商品 、 找 商家 、 竹 商 圈 type=text name=querystring> <a id=soso_submit class=btu href="javas 
cript::"> 搜 索 </a> </form> 
<a hre 伍 "#"> 帮 助 </a> </div></li> 
<li><a href="#"><img src="images/logo.gif"></a></li> 
<li class=title> 
<h1> 精 挑 细 选 </h1></li> 
<li class=city> 
<h2 id=cityname> 郑 州 </h2><span>【<a href="#"”data-prarm="city_list"> 切 换 城 市 </a>】</span> 
<div id=show _city class=bubble><b class=ico>ico</b> 
<b id=ipclose class=cloce>ico</b> 您 是 不 是 在 <em id=ipcityname></em>? 点 击 可 选择 其 他 城市 </di 
w</li></ul></div> 
<!-- 头 部 导航 --> 
<div id=headnav> 
<ul id=nav> 
<li class=phone date-nav="pinpaihui"><a href="#" data-prarm="click mobile nav"><b>ico</b><span> 
手机 版 </span> 手 机 版 </a></li> 
<li date-nav="shangcheng"><a href="#" data- ="click ”channel10"><b>ico</b> 阿 里 商城 </a> </li> 
<li date-nav="index"><a href="#"” data-prarm="click ”channell1"><b>ico</b> 团 购 精 选 </a> </li> 
<li date-nav="meishi"><a href="#" data-prarm="click channel2"><b>ico</b> 美 食 </a> </li> 
<li date-nav="yule"><a href="#" data-prarm="click channel3"><b>ico</b> 娱 乐 </a> </li> 
<li date-nav="dianying"><a href—="#" data-] ="click ”channel4"><b>ico</b> 电 影 </a> </li> 
<li date-nav="meirongbaojian"><a href="#" data-prarm="click_channel5"><b>ico</b> 美 容 保健 </a></li> 
<li date-nav="shenghuofuwu"><a href="#" data-prarm="click channel6"><b>ico</b> 生 活 服务 </a></li> 
<li date-nav="lvyou"><a href="#" data-prarm="click channel7"><b>ico</b> 旅 行 </a> </li> 
<li date-nav="jiudian"><a href="#" data-prarm="click channel8"><b>ico</b> 酒 店 </a> </li> 
<li date-nav="shangpin"><a href="#" data-prarm="click channel9"><b>ico</b> 网 购 </a> </li> 
<li date-nav="shop"><a href="#" data-prarm="click channel9"><b>ico</b> 品 牌 汇 </a><em class=new> 
new</em> 
</li></ul> 
</div> 
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24.2.3 ”分 类 及 区 域 选择 模块 分 析 


分 类 


团购 分 类 及 区 域 选择 模块 在 团购 网 站 中 是 最 常见 的 , 本 实例 中 该 模块 的 效果 图 24-7 所 示 。 
: 歧 饮 美食 29T 


休闲 娱乐 51) ”电影 fr) ”美容 保健 (100) 生 丙 丰 7254) 。 网购 (2941 


6) ”部 山区 6) 高 新 开发 区 色 ; 


图 24-7 分 类 及 区 域 选择 模块 
该 模块 主要 是 文字 和 超 链 接 ， 实 现 起 来 较 简单 ， 具 体 代 码 如 下 。 


<div class="dhnav_ box dhnav_box_index clearfix "><!-- 分 类 更 多 开始 --> 
<div class="list more 2 clearfix"> 
<ul class="pd nav clearfix"> 
<li class=lft> 分 类 : </li> 
<li class=on date="all btm"><a class="nav listal clearfix" href="#" data-prarm="click channell 0"> 团 


购 精 选 (100)</a> </i> 


div> 


<li date="all btm"><a href="#" data-prarm="click channell 1"> 和 餐饮 美食 (<em>297</em>)</a></1i> 

<li date="all btm"><a href="#" data-prarm="click_ channell 2"> 休 闲 娱乐 (<em>51</em>)</a> </li> 

<li date="all_ btm"><a href="#" data-prarm="click channell 3"> 电 影 (<em>7</em>)</a> </li> 

<li date="all btm"><a href="#" data-prarm="click channell 4"> 美 容 保健 (<em>100</em>)</a></li> 

<li date="all btm"><a href="#" data-prarm="click_channell_5"> 生 活 服务 (<em>178</em>)</a></li> 

<li date="all_ btm"><a href="#" data-prarm="click_channell_6"> 旅 行 (<em>1559</em>)</a> </li> 

<li date="all_ btm"><a href="#" data-prarm="click_channell_7"> 酒 店 (<em>7254</em>)</a> </li> 

<li date="all btm"><a href="#" data-prarm="click_channell 8"> 网 购 (<em>2941</em>)</a> </li></ul></ 


<!-- 区 县 更 多 开始 --> 

<div class="list more 2 no_bottom clearfix"> 

<ul class="pd nav clearfix"> 
<li class=lft> 区 县 ; </i> 
<li class=on><a class="nav_listal clearfix"#" data- ="click channell "> 全 部 </a> </li> 
<li><a href="#" data-prarm="click channell jinshui"> 金 水 区 (<em>52</em>)</a> </li> 
<li><a href="#" data-prarm="click channell_erqi"> 二 七 区 (<em>25</em>)</a> </li> 
<]i><a href="#" data-] ="Click_channell_guancheng"> 管 城区 (<em>22</em>)</a> </li> 
<li><a href="#" data-prarm="click_channell_zhongyuan"> 中 原 区 (<em>21</em>)</a> < 人 > 
<li><a href="#" data-prarm="click_channell zhengdongxinqu"> 郑 东 新 区 (<em>11</em>)</a> </li> 
<li><a href="#" data-prarm="click_channell shangjie"> 上 街区 (<em>5</em>)</a> </li> 
<li><a href="#"” data-prarm="click channell huiji"> 惠 济 区 (<em>9</em>)</a> </li> 
<li><a hre 伟 '" 埋 " data-prarm="click channell jishujingjikaifa"> 经 济 技术 开发 区 (<em>6</em>)</a> </li> 
<li><a href="#" data-prarm="click channell mangshan"> 部 山区 (<em>6</em>)</a> </li> 
<li><a href="#" data-prarm="click_channell gaoxinkaifa"> 高 新 开发 区 (<em>6</em>)</a> </li> 
<li><a href="#" data-pi ="click_channell_chukoujiagong"> 出 口 加 工区 (<em>3</em>)</a> < 人 1i> 
<li><a href="#" data-prarm="click_channell gongyi"> 巩 义 市 (<em>3</em>)</a> </li> 
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<li><a href="#" data-prarm="click_ channell xingyang"> 荣 阳 市 (<em>3</em>)</a> </li> 

<li><a hre 伍 "#" data-prarm="click _ channell xinmi"> 新 密 市 (<em>3</em>)</a> </li> 

<li><a hre 全 '"#"' data-prarm="click channell xinzheng"> 新 郑 市 (<em>3</em>)</a> </li> 

<li><a href="#" data-prarm="click channell dengfeng"> 登 封 市 (<em>3</em>)</a> </li> 

<li><a href="#" data-prarm="click_ channell _ zhongmu"> 中 件 县 (<em>3</em>)</a> </li> 

<li><a href="#" data-prarm="click _ channell other"> 其 他 (<em>20</em>)</a> </li></ul></div></div> 


24.2.4 ”新品 展示 模块 分 析 


网 页 主体 左 侧 为 整个 网 页 的 主要 内 容 , 是 最 新 团购 产品 的 展示 模块 , 该 模块 中 使 用 大 量 醒 
目的 图 文 展 示 产品 信息 ， 并 且 有 价格 和 团购 数量 统计 功能 。 具 体 效 果 如 图 24-8 所 示 。 


【部 店 通用 洲 色 王者 ! 仅 39.9 元 ! 字 原 价 87 元 多 仅 43 元 ， 亨 原价 59 元 『 儿 内 世家 多 家 店 烤肉 自 


异 玉 线 双 人 到 动 午 冯 均 适用 秀 1 人 次 ! 
¥39.9 ,» yx EE 


【3 由 通用 】 仅 46 元 ! 亨 原 份 72 元 的 本 让 火锅 双 
人 车 交 ! 


¥46 ,= 


1 人 PR 9 人 PM 9 


BR 5.. 二 


29.9 元 ， 高 原价 59 元 『 宫 生 烤 【财富 广场 E 下 
肉 4 自助 午 徊 1 人 次! 品 票 1 清 ! 
¥29.9 sw Dy¥20.5,, 


#59 35 人 9 下 9 #56 124 人 已 向 天 9 


图 24-8 ”新品 展 示 模 块 
图 24-8 中 只 列 出 了 6 项 产品 的 信息 , 在 运营 中 的 团购 网 站 首页 新 品 展 示 可 能 多 达 几 十 个 
甚至 上 百 个 ,但 是 每 个 产品 的 实现 代码 都 很 相似 ， 只 要 掌握 了 本 实例 中 的 代码 ， 完 全 可 以 完成 


显示 需求 。 
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实现 本 节 模 块 的 具体 代码 如 下 。 


<ul class=goods listind> 

<li class=goods listindli> 

<h2><a class="spti_ a yahei”title= 米 线 王者 hre 伍 "#" link= blank data-prarm="click_channell all_title- 
0-d7fb83afb45efafb">【 多 店 通用 米线 王者 ! 仅 39.9 元 ! 享 原价 82 元 金牌 米线 双人 套 ...</a> 

</h2><a class=picture href="#" link= blank data-prarm="click channell all img-0-d7fb83afb45efafb"> 

<img class=sp_img src="images/goods 1345621705 2674 1.jpe" width=358 height=238> </a> 

<div style="padding-bottom: Opx; padding-left: 15px: width: 268px: padding-right: 75px; padding-top: 
Opx" class="buy_ boxind clearfix"> 


<a class="bh buy a" href="#" link= blank data-] ="click channell all button-0-d7fb83afb45efafb"> 
去 看 看 </a> <span class=num>¥39.9</span> <em>4.9 折 </em> </div> 
<u> 


<li class="left yahei">¥82</li> 
<li class=center data-id="d7fb83afb45efafb">0 人 已 购买 </li> 
<li class=right><span> 多 区 县 </span></li></ul> 
<div class=sp_yy>ico</div></li> 
<li class=goods listindli> 
<h2><a class="spti_a yahei" title= 烤 肉 世家 href="#" link= blank data-prarm="click_channell_all_title- 
1-0d20024fa823b3a8"> 仅 43 元 ， 享 原价 59 元 [烤肉 世家 」 多 家 店 烤肉 自助 午 晚餐 通用 券 1 人 次 ! </a> 
</h2><a class=picture href="#" link= blank data-prarm="click channell all img-1-0d20024fa823b3a8"> 
<img class=sp_img src="images/goods 1349943361 7356 1.jpe" width=358 height=238> </a> 
<div style="padding-bottom: 0px: padding-left: 15px; width: 268px: padding-right: 75px; padding-top: 
Opx" class="buy_boxind clearfix"> 
<a class="bh buy a" href="#" link= blank data-prarm="click channell all button-1-0d20024fa823b3a8 
吃 去 看 看 </a> <span class=num>¥43</span> <em>7.3 折 </em> </div> 
<u> 
<li class="left yahei">¥59</li> 
<li class=center data-id="0d20024fa823b3a8">29 人 已 购买 </li> 
<li class=right><span> 百 货 世 界 </span></li></ul> 
<div class=sp_yy>ico</div></li> 
<li class=goods listindli> 
<h2><a class="spti_a yahei"” title= 酷 爽 火 锅 ! href="#" link= blank data-prarm="click_channell all ti 
tle-2-d4f6a300af785a9c">【3 店 通用 】 仅 46 元 ! 享 原价 72 元 的 酷 爽 火锅 双人 套餐 ! </a> 
</h2><a class="li indlogo bh” href="#" link= blank> 专 卖 店 </a> 
<a class=picture href="#" link= blank data-] ="click_channell all img-2-d4f6a300af785a9c">< 
img class=sp_img src="images/goods 1349851399 5923 1.jpe” width=358 height=238> </a> 
<div style="padding-bottom: Opx: padding-left: 15px: width: 268px: padding-right: 75px; padding-top: 
Opx" class="buy_ boxind clearfix"> 
<a class="bh buy_ a" href="#" link= blank data-prarm="click channell all button-2-d4f6a300af785a9c"> 
去 看 看 </a> <span class=num>¥46</span> <em>6.4 折 </em> </div> 
<u> 
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<li class="left yahei">¥72</li> 
<li class=center data-id="d4f6a300af785a9c">1 人 已 购买 </li> 
<li class=right><span> 多 区 县 </span></li></ul> 
<div class=sp_yy>ico</div></li> 
<li class=goods listindli> 
<h2><a class="spti a yahei" title= 小 岛 咖啡 hre 伍 "#" link= blank data-prarm="click_channell all_titl 
e-3-561002cba5b24ac6"> 仅 85 元 ， 享 原价 376 小 岛 咖啡 双人 套餐 ! </a> 
</h2><a class=picture href="#" link= blank data-p ="click channell all img-3-561002cbaSb24ac 
6"> 
<img class=sp_img src="images/goods 1349926783 2203 1.jpe” width=358 height=238> </a> 
<div style="padding-bottom: Opx; padding-left: 15px; width: 268px:; padding-right: 75px; padding-top: 
Opx" class="buy_ boxind clearfix"> 
<a class="bh buy a" href="#" link= blank data-prarm="click channell all button-3-S61002cbaSb24ac6 
"> 去 看 看 </a> <span class=num>¥85</span> <em>2.3 折 </em> </div> 
<u> 
<li class="left yahei">¥376</li> 
<li class=center data-id="561002cba5b24ac6">0 人 已 购买 </li> 
<li class=right><span> 其 他 </span></li></ul> 
<div class=sp_yy>ico</div></li> 
<li class=goods listindli> 
<h2><a class="spti_a yahei" title= 自 助 烤肉 ! href="#" link= blank data-prarm="click_channell_all_ titl 
e-4-6f344b02f069ebb8">【 曼 哈 顿 】 仅 29.9 元 ， 享 最 高 原价 59 元 「 宫 廷 烤肉 」 自 助 午餐 1 人 次 ! </a> 
</h2><a class=picture href="#" link= blank data-prarm="click channell all img-4-6f344b02f069ebb8"> 
<img class="sp_img lazyload" src="images/grey.gif" width=358 height=238 original="images/goods 134985222 
0_2880_1.jpg"> 
</a> 
<div style="padding-bottom: Opx; padding-left: 15px: width: 268px; padding-right: 75px; padding-top: 
Opx" class="buy_boxind clearfix"><a class="bh buy a" href="#" link= blank data-prarm="click channell all 
_button-4-6f344b02f069ebb8"> 去 看 看 </a> 
<span class=num>¥29.9</span> <em>5.1 折 </em> </div> 
<u> 
<li class="left yahei">¥59</li> 
<li class=center data-id="6f344b02f069ebb8">35 人 已 购买 < 由 > 
<li class=right><span> 财 富 广 场 </span></li></ul> 
<div class=sp_yy>ico</div></li> 
<li class=goods listindli> 
<h2><a class="spti_a yahei" title= 魔 幻影 城 ! href="#" link= blank data-prarm="click_channell all_titl 
e-5-46b628c4e80e6ea4">【 财 富 广 场 】 仅 20.5 元 ， 享 原价 50 元 魔幻 影 城 电影 票 1 张 ! </a> 
</h2><a class="li indlogo bh tc_index” href="#" link= blank> 套 餐 </a> 
<a class=picture href="#" link= blank data-prarm="click channell all img-5-46b628c4e80e6ea4"> 
<img class="sp_img lazyload" src="images/grey.gif" width=358 height=238 original="images/goods 1 
349853854 5414 1.jpg"> 
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</a> 
<div style="padding-bottom: Opx; padding-left: 15px:; width: 268px: pa 热门 分 类 
dding-right: 75px: padding-top: 0px”class="buy_boxind clearfix"> 电影 自助 餐 。 ”足疗 按摩 


<a class="bh buy a" href="#" link= blank data-prarm="click cha 会 品 保健 《美发 汽车 服务 
mnnell_all button-5-46b628c4e80e6ea4"> 去 看 看 </a><span class=num>¥20.5</spa 运动 健身 游乐 游艺 。 美容 锰 形 
D> <em>4.1 折 </em> 


热 销 商 品 排行 榜 
<div> nan yo 
<u> PT \ roo 
<li class="left yahei">¥50</li> — SS 1893 人 购买 
<Hi class=center data-id="46b628c4e80e6ea4">124 人 已 购买 </li> Lona 
<li class=right><span> 其 他 </span></li></ul> ass 
<div class=sp_yy>ico</div></li> ee ,人 购买 
</ul> 
时 尚 男士 拉链 钱包 
以 上 代码 共 展示 了 6 种 商品 的 信息 。 回 珊 身 纤 休 梅 
、 回 地 革 型 过 渗 烟 听 
24.2.5” 侧 边栏 模块 分 析 加 男士 昌 启 利 持 包 
网 页 主体 右 侧 为 侧 边栏 ， 主 要 包括 热门 分 类 模块 、 热 销 商 品 排 = 者 时 Y36 
行 模块 和 热门 频道 模块 。 具 体 效果 如 图 24-9 所 示 。 Ed 
以 上 模块 的 实现 代码 如 下 所 示 。 家 护 保健 和 
超 邓 亲 肤 空调 夏 补 
1. 侧 边栏 框架 代码 加 环保 印花 活性 四 件 套 
<div class=con boxrig> ei eos 
国 美佳 2 件 套 
2. 热门 分 类 代码 ri 
<div id=all_seerig> 美食 
<h2 class=yahei> 热 门 分 类 </h2> > 
<ul class=clearfix> 
娱乐 
<li><a href="#" pa 
data-prarm="click_channellr_dianying"> 电 影 </a> </li> 
<li><a href="#" 刻 电影 
data-prarm="click channellr_17-0-0-0-0-1"> 自 助 餐 </a> </li> 
<li><a href="#" 美容 保健 
data-prarm="click_channellr 40-0-0-0-0-1"> 足 疗 按摩 </a> </li> 、 
sd 
<li><a href="#" 
data-prarm="click channellr 57-0-0-0-0-1"> 食 品 保健 </a> </li> [i 生活 服务 
<li><a href="#" 
data-] ="click_channellr_ 33-0-0-0-0-1"> 美 发 </a> </li> » 网 购 
<li><a href="#" | 
data-prarm="click_channellr 44-0-0-0-0-1"> 汽 车 服务 </a> </li> 
<li><a href="#" 24-9” 侧 边栏 模块 


data-prarm="click_channellr 25-0-0-0-0-1"> 运 动 健身 </a> </li> 
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<li><a href="#" 

data-prarm="click_channellr 27-0-0-0-0-1"> 游 乐 游艺 </a> </li> 

<li><a href="#" 

data-prarm="click_channellr 35-0-0-0-0-1"> 美 容 塑 形 </a> </li></ul></div> 


以 上 代码 主要 使 用 了 <ul> 标 签 构成 文字 序列 ， 然 后 使 用 <a> 标 签 为 每 一 个 分 类 做 超 链接 。 
3. 热 销 商品 排行 榜 代 码 


<div id=rightrank> 
<h2 class=yahei> 热 销 商品 排行 榜 </h2> 
<u> 
<li class=on> 
<div class=tjshow><b class=one>ico</b> <a href="#" link= blank data-prarm="click channelrl-hot-img 
-0-a3b5cOfb643f099d"><img class=pd img alt=qq! src= "images/18goods_ 1334053028 9657 3.jpg"> 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em 
class="two yahei">99</em><br><em class=three>1893</em> 人 购买 </div> 
<p><a href="#" link= blank data-pl ="click_ channelrl1-hot-title-it_ index-a3b5cOfb643f099d">lakrina 
春秋 被 </a></p></div></li> 
<li class=on> 
<div class=tjshow><b class=two>ico</b> <a href="#" link= blank data-prarm="click channelrl-hot-im 
g-1-48456be593e0dcba"><img class=pd_img alt=qq src="images/11goods 1334201980 7392 3.jpg"> 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">49</em><br><em class=thre 
e>21193</em> 人 购买 </div> 
<p><a href="#" link= blank data-prarm="click channelrl-hot-title-it_index-48456be593e0dcba"> 时 尚 男 
士 拉链 钱包 </a></p></div></li> 
<li class=on data="recommend"><span class=three> 瘦 身 纤 体 梅 </span> 
<div class=tjshow><b class=three>ico</b> <a href="#" link= blank data-prarm="click channelrl-hot-i 
mg-2-cOf41f265flebf80"><img class=pd img alt=qq src="images/13goods 1334123797 4501 3.jpg"> 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">1</em><em 
class="one yahei">.99</em><br><em class=three>270323</em> 人 购买 </div> 
<p><a href="#" link= blank data-prarm="click_channelr1-hot-title-it index-cOf41f265flebf80"> 瘦 身 纤 体 
梅 </a></p></div></li> 
<li data="recommend"><span class=four> 抛 弃 型 过 滤 烟 嘴 </span> 
<div class=tjshow><b class=four>ico</b> <a href="#" link= blank data-prarm="click channelrl-hot-im 
g-3-eb81051c35f789bf"><img class=pd img alt=qq! src="images/12goods 1333255335 3909 3.jpg"> 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">1</em><em class="one yahe 
i">.9</em><br><em class=three>39922</em> 人 购买 </div> 
<p><a href="#" link= blank data-prarm="click channelrl-hot-title-it_ index-eb81051c35f789bf'"> 抛 弃 型 
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过 滤 烟 嘴 </a></p></div></li> 
<li data="recommend"><span class=five> 男 士 单 肩 斜 挎包 </span> 
<div class=tjshow><b class=five>ico</b> 
<a href="#" link= blank data-prarm="click channelrl-hot-img-4-48424ef428f34dd5"><img class=pd 
_img alt=qq src="images/13goods 1333259469 7784 3.jpg"> 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">78</em><br><em class=thre 
e>1256</em> 人 购买 </div> 
<p><a href="images" link= blank data-] ="click_channelr1-hot-title-it_index-48424ef428f34dd5"> 男 
士 单 肩 斜 挎包 </a></p></div></li> 
<li data="recommend"><span class=six> 家 纺 保健 枕 </span> 
<div class=tjshow><b class=six>ico</b> 
<a href="#" link= blank data-prarm="click channelrl-hot-img-S-da9df721d6ff6d82"> 
images/13goods 1333258035 7250_3.jpg"> 


<img class=pd img alt=qq! src= 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">36</em><br><em class=thre 
e>1864</em> 人 购买 </div> 
<p><a href="#" link= blank data-prarm="click_ channelrl-hot-title-it_ index-da9df721d6ff6d82"> 家 纺 保 
健 枕 </a></p></div></li> 
<li data="recommend"><span class=seven> 超 柔 亲 肤 空调 夏 被 </span> 
<div class=tjshow><b class=seven>ico</b> 
<a href="#" link= _ blank data-prarm="click channelrl-hot-img-6-bS0c9aebc4ae727a"> 
<img class=pd img alt=qq! src="images/llgoods 1333163649 1180 3.jpg"> 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">59</em><br><em class=thre 
e>640</em> 人 购买 </div> 
<p><a href="#" link= blank data-prarm="click_channelr1-hot-title-it_index-b50c9aebc4ae727a"> 超 柔 亲 
肤 空 调 夏 被 </a></p></div></li> 
<li data="recommend"><span class=eight> 环 保 印花 活性 四 件 套 </span> 
<div class=tjshow><b class=eight>ico</b> 
<a href="#" link= blank data-prarm="click channelrl-hot-img-7-91besabbb374b770"> 
<img class=pd img alt=qq! src="images/l18goods 1333017091 3843 3.jpe"> 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">95</em><br><em class=thre 
e>6577</em> 人 购买 </div> 
<p><a href="#" link= blank data-prarm="click channelr1-hot-title-it index-91besabbb374b770"> 环 保 印 
花 活性 四 件 套 </a></p></div></li> 
<li data="recommend"><span class=nine> 加 厚 真空 压缩 袋 套 装 </span> 
<div class=tjshow><b class=nine>ico</b> 
<a href="#" link= blank data. ="click_channelrl-hot-img-8-2aa082206312b1a7"> 
<img class=pd img alt=qq src="images/goods 1335508647 4181 3.jpg"> 
</a> 
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<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">69</em><br><em class=thre 
e>5042</em> 人 购买 </div> 
<p><a href="#" link= blank data-prarm="click channelrl-hot-title-it index-2aa082206312b1a7"> 加 厚 真 
空 压缩 袋 套 装 </a></p></div></li> 
<li data="recommend"><span class=ten> 美 佳 2 件 套 </span> 
<div class=tjshow><b class=ten>ico</b> 
<a href="#" link= blank data-prarm="click channelrl-hot-img-9-e685d369ba834f4a"> 
<img class=pd _ img alt=qq src="images/16goods 1333009457 2889 3.jpg"> 
</a> 
<div class=ritbox><em class="one yahei">¥</em><em class="two yahei">48</em><br><em class=thre 
e>10590</em> 人 购买 </div> 
<p><a href="#" link= blank data-prarm="click_channelrl-hot-title-it_ index-e685d369ba834f4a"> 美 佳 2 
件 套 </a></p></div></li></ul></div> 


4. 热门 频道 代码 


<div id=channelrirht class=yahei> 
<h2 class=hd> 热 门 频道 </h2> 
<ul> 
<li><a class=meishi href="#" data-prarm="click_ channelrl"><span><strong> 美 食 </strong> 中 和 餐 / 火 锅 / 
自助 餐 <br> 特 色 餐 饮 /蛋糕 .</span><em> 美 食 </em> </a></li> 
<li><a class=yule href="#"” data-prarm="click channelr2"><span><strong> 娱 乐 </strong>ktv/ 游 乐 游艺 / 
温泉 <br> 运 动 健身 /演出 ... </span><em> 娱 乐 </em> </a></li> 
<li><a class=dianying href="#" data-prarm="click_channelr3"><span><strong> 电 影 </strong> 低 价 看 大 
片 ， 精彩 <br> 别 错过 </span><em> 电 影 </em> </a></li> 
<li><a class=meirong href="#" data-prarm="click channelr4"><span><strong> 美 容 保健 </strong> 美发 / 
足疗 按摩 /美甲 <br> 美 容 塑性 /养生 .… </span><em> 美 容 保健 </em> </a></li> 
<li><a class=life href="#" data-prarm="click channelr5"><span><strong> 生 活 服务 </strong> 摄影 写生 / 
母 婴 亲子 <br> 汽 车 服务 /教育 ... </span><em> 生 活 服务 </em> </a></li> 
<li><a class=shop href="#" data-prarm="click_channelr8"><span><strong> 网 购 </strong> 服装 /日 用 家 
居 / 食 品 <br> 保 健 /个 护 化 妆 .… </span><em> 网 购 </em> </a></li></ul></div> 


以 上 代码 实现 了 热门 频道 模块 的 功能 。 


<div style="width: 222px" id=floatbox> 
<div id=floatad></div></div> 
</div> 


24.2.6 ”热门 城市 索引 模块 分 析 


每 个 城市 都 有 自己 的 团购 内 容 , 为 了 方便 浏览 者 跨 区 域 访问 团购 信息 , 在 主体 下 方 设置 了 
一 个 热门 城市 索引 模块 ， 该 模块 主要 以 文字 和 超 链接 实现 ， 具 体 效 果 如 图 24-10 所 示 。 
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热门 城市 : 北京 团购 评 圳 团购 无锡 团购 。 天 津 国 购 沈阳 团购 。 济南 团购 。 郑州 团购 石家庄 团购 成 都 团购 。 上 海 团购 南京 团购 长沙 团购 
西安 团购 。 广州 困 购 杭州 团购 ”青岛 田 购 大连 团购 宁波 团购 苏州 团购 重庆 团购 。 武汉 团购 厦门 团购 哈尔滨 团购 。 合肥 团购 


图 24-10 热门 城市 索引 模块 
该 模块 结构 简单 ， 具 体 实现 代码 如 下 。 


<div class=hot city> 

<dl class=city dl> 
<dd class="city_dd clearfix"><strong class=hot citystr> 热 门 城市 ，</strong> 
<a class=hot citya href="#"> 北 京 团购 </a> 
<a class=hot_citya hre 人 f="#"> 深 圳 团购 </a> 
<a class=hot_citya href="#"> 无 锡 团 购 </a> 
<a class=hot_citya href="#"> 天 津 团购 </a> 
<a class=hot_citya hre 伍 "#"> 沈 阳 团购 </a> 
<a class=hot_citya href="#"> 济 南 团购 </a> 
<a class=hot_citya hre 人 ="#"> 郑 州 团购 </a> 
<a class=hot_citya href="#"> 石 家 庄 团 购 </a> 
<a class=hot_citya href="#"> 成 都 团购 </a> 
<a class=hot_citya href="#"> 上 海 团购 </a> 
<a class=hot_citya href="#"> 南 京 团购 </a> 
<a class=hot_citya hre 伍 "#"> 长 沙 团 购 </a> 
<a class=hot_citya hre 伍 "#"> 西 安 团购 </a> 
<a class=hot_citya href="#"> 广 州 团购 </a> 
<a class=hot_citya href="#"> 杭 州 团购 </a> 
<a class=hot_citya hre 伍 "#"> 青 岛 团购 </a> 
<a class=hot_citya href="#"> 大 连 团购 </a> 
<a class=hot_citya hre 伍 "#"> 宁 波 团 购 </a> 
<a class=hot_citya hre 伍 "#"> 苏 州 团购 </a> 
<a class=hot_citya href="#"> 重 庆 团 购 </a> 
<a class=hot_citya hre 伍 "#"> 武 汉 团 购 </a> 
<a class=hot_citya href="#"> 厦 门 团购 </a> 
<a class=hot_citya hre 伍 "#"> 哈 尔 滨 团 购 </a> 
<a class=hot_citya href="#"> 合 肥 团 购 </a> 
</dd></dl></div> 


24.2.7 ”底部 模块 分 析 


底部 主要 是 客户 服务 和 快捷 链接 模块 ， 用 于 解决 各 种 客户 服务 问题 ， 具 体 效 果 如 图 24-11 
所 示 。 
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用 户 帮助 获取 更 新 商务 合作 公司 信息 24 小 时 服务 热 疆 
于 和 亲朋 问 里加 新浪 灌 二 丙 家 入 广 关于 我 们 500-000-0000 
罕见 问题 阿里 团 开 心 同 主页 提供 团购 信息 欣 伯 报道 0 -000.9009 
和 条 规则 问 里 团 角 4 姐 友情 针 接 加 入 我 们 
加 分 规则 ssi 阅 EN 隐 声 明 我 要 提问 
消费 者 保障 于 机 版 下 载 用 户 协议 
网 站 地 图 


图 24-11 底部 模块 
该 模块 内 容 主 要 也 是 文字 和 超 链接 ， 实 现 起 来 较 简单 ， 具 体 代 码 如 下 。 


<div id=footer><b class=top>ico</b> 
<div class="bottom box clearfix"> 
<ul class=boul list> 
<li class=li x> 
<h2 class=yahei> 用 户 帮助 <h2></li> 
<li><a class=bolist_ a href="#"> 玩 转 阿 里 </a></li> 
<li><a class=bolist_a hre 伍 "#"> 常 见 问题 </a></li> 
<li><a class=bolist_a href="#"> 秒 杀 规 则 </a></li> 
<li><a class=bolist_a hre 伍 "#"> 积 分 规则 </a></li> 
<li><a class=bolist_a hre 人 ="#"> 消 费 者 保障 </a></li> 
<li><a class=bolist_a hre 伍 "#"> 网 站 地 图 </a></li></ul> 
<ul class=boul list> 
<li class=li_ x> 
<h2 class="h2_1 yahei"> 获 取 更 新 </h2></li> 
<li><a class=bolist_a href="#" link= blank data-prarm="weibo"> 阿 里 团 新 浪 微 博 </a></li> 
<li><a class=bolist_a href="#" link= blank data-prarm="kaixin"> 阿 里 团 开心 网 主页 </a></li> 
<li><a class=bolist_a href="#" link= blank data-prarm="douban"> 阿 里 团 豆 辩 小 组 </a></li> 
<li><a class=bolist_a hre 人 ="#" data-prarm="rss">rss 订阅 </a></li> 
<li><a class=bolist_a href="#" data-prarm="click_mobile_bottom"> 手 机 版 下 载 </a></li></ul> 
<ul class=boul list> 
<li class=li_ x> 
<h2 class="h2_ 2 yahei"> 商 务 合作 </h2></li> 
<li><a class=bolist_a hre 伍 "#"> 商 家 入 驻 </a></li> 
<li><a class=bolist_a hre 人 f="#"> 提 供 团 购 信 息 </a></li> 
<li><a class=bolist_a href="#"> 友 情 链接 </a></li> 
<li><a class=bolist_ a hre 伍 "#"> 开 放 api </a></li></ul> 
<ul class=boul list> 
<li class=li x> 
<h2 class="h2 3 yahei"> 公 司 信息 </h2></li> 
<li><a class=bolist_a hre 伍 "#"> 关 于 我 们 </a></li> 
<li><a class=bolist_a hre 伍 "#"> 媒 体 报道 </a></li> 
<li><a class=bolist_a hre 伍 "#"> 加 入 我 们 </a></li> 


团购 商务 类 网 站 的 设计 ”第 24 党 


<li><a class=bolist_ a hre 仁 "#"> 隐 私 声明 </a></li> 
<li><a class=bolist_ a href="#"> 用 户 协 议 </a></li></ul> 
<div class=kefu_bottom><!--<h2 class="yahei"><a href="#"title=" 阿 里 团 在 线 客服 "> 阿里 团 在 线 客服 </a> 


</h2> 


下 


<span class="bh wan_x"> 横 线 </span>--> 
<h2 class="kh2_1 yahei">24 小 时 服务 热线 </h2> 
<h2 class="kh2 2 yahei">500-000-0000</h2> 
<h2 class="kh2 2 yahei">500-000-0000</h2><!--<span class="bh wan_x"> 横 线 </span>--> 
<a class="bh kfwwweibo”href="#"”link=_blank> 阿 里 团 客服 微 博 </a> 
<h2 class="kh2 3 yahei"> 
<a href="#" link=_blank> 我 要 提问 </a></h2></div></div></div> 


24.3 调整 


网 站 设计 完成 后 , 如 果 需 要 完善 或 者 修改 , 可 以 对 其 中 的 框架 代码 以 及 样式 代码 进行 调整 ， 


H 


简单 介绍 几 项 内 容 的 调整 方法 。 


24.3.1 ”部 分 内 容 调 整 


要 修改 网 页 整体 背景 色 ， 可 打开 css 样式 表 ， 修 改 body 标记 样式 ， 修 改 后 代码 如 下 。 


body { 
background:#ccffff 
} 
使 用 Photoshop CS6 绘制 3 个 图 像 ，logo.gif、dhbgl.gif 和 dhbg2.gif。 其 中 dhbg2.gif 比 


dhbg1.gif 的 渐变 色 深 一 些 ， 如 图 24-12 所 示 。 


oe mm mm 


图 24-12 绘制 的 3 个 图 像 
修改 样式 表 中 的 headNav 样式 属性 ， 修 改 后 代码 内 容 如 下 。 


#headnav { 
background:url(../images/dhbg2.gif) no-repeat 
} 
#headnav ul li a { 
background:url(../images/dhbg1.gif) no-repeat 
#headnav ul li ab { 
background:url(../images/dhbg]1.gif) no-repeat 
} 
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24.3.2 ”模块 调整 
在 本 实例 中 ,网 站 模块 基本 固定 , 模块 位 置 基 本 不 需要 调整 ， 如 果 要 修改 的 话 ， 可 以 在 网 
页 主体 内 容 前 增加 一 个 banner， 在 导航 栏 下 方 插入 banner 代码 。 


<div style="height:10px"></div> // 插 入 一 个 高 度 为 10px 的 空 模块 ， 进 行 上 下 内 容 分 隔 
<div style="text-align:center"> 

<a href=—"#"><img src="images/banner.jpg"></a> 

</div> 


24.3.3 ”调整 后 预览 测试 
调整 后 ， 网 页 预览 效果 如 图 24-13 所 示 。 
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图 24-13 ”网 页 的 整体 效果 


